javascript - Click function not working on dynamically added div -
this question has answer here:
<button id="add_tab">add tab</button> <input id="text-search" type="text"/> <div id="tabs"> <ul> <li><a href="#tabs-1" style="padding:0;"><span class="color-bar"> </span><div class="alert-header">alert #1</br><span class="time-date">5:30pm - 07/11/2014</span></div><span class="ui-icon ui-icon-close" role="presentation">remove tab</span></a></li> <li><a href="#tabs-2" style="padding:0;"><span class="color-bar"> </span><div class="alert-header">alert #2</br><span class="time-date">5:30pm - 07/11/2014</span></div><span class="ui-icon ui-icon-close" role="presentation">remove tab</span></a></li> <li><a href="#tabs-3" style="padding:0;"><span class="color-bar"> </span><div class="alert-header">alert #3</br><span class="time-date">5:30pm - 07/11/2014</span></div><span class="ui-icon ui-icon-close" role="presentation">remove tab</span></a></li> </ul> <div id="tabs-1" style="box-shadow: 10px 10px 50px #888888;"> <p class="alert-text">this 1 acknowledged</p> </div> <div id="tabs-2" style="box-shadow: 10px 10px 50px #888888;"> <p class="alert-text">this 1 cleared</p> </div> <div id="tabs-3" style="box-shadow: 10px 10px 50px #888888;"> <p class="alert-text">this 1 active</p> </div> </div>i adding 3 divs statically , remaining added based on jquery call. click function apply class "alert-header" working fine static div's click event not working dynamically generated div's.. please give me solution...
here code:
this click event call
$('.alert-header').click(function() { alert("called now"); }); this im adding dynamic div , static content:
var tabtitle = $( "#tab_title" ),tabcontent = $( "#tab_content" ),tabtemplate = "<li><span class='color-bar'> </span><div class='alert-header' ><a style='padding:0.5px' href='<%="#"%>{href}'><%="#"%>{label}</a></br><span class='time-date' style='margin-left:-100%'><%="#"%>{time} - <%="#"%>{date}</span><input id='<%="#"%>alertval' type='hidden' value='<%="#"%>{alertid}'/></div><span class='ui-icon ui-icon-close' role='presentation'>remove tab</span></li>",tabcounter = 4; //mouse on var tabs =$( "#tabs" ).tabs({ active: false, event: "mouseenter", collapsible: true }).mouseleave(function () { $(this).tabs({ active: false }); }); // modal dialog init: custom buttons , "close" callback reseting form inside var dialog = $( "#dialog" ).dialog({ autoopen: false, modal: true, buttons: { add: function() { addtab(); $( ).dialog( "close" ); }, cancel: function() { $( ).dialog( "close" ); } }, close: function() { form[ 0 ].reset(); } }); // addtab form: calls addtab function on submit , closes dialog var form = dialog.find( "form" ).submit(function( event ) { addtab(); dialog.dialog( "close" ); event.preventdefault(); }); // actual addtab function: adds new tab using input form above function addtab() { var label = tabtitle.val() || "tab " + tabcounter, id = "tabs-" + tabcounter, li = $( tabtemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) ), tabcontenthtml = tabcontent.val() || "tab " + tabcounter + " content."; tabs.find( ".ui-tabs-nav" ).append( li ); tabs.append( "<div id='" + id + "' style='box-shadow:10px 10px 50px #888;'><p>" + tabcontenthtml + "</p></div>" ); tabs.tabs( "refresh" ); tabcounter++; } function addtab(alertid, date, time, status, desc) { var label = tabtitle.val() || "alert #" + tabcounter, id = "tabs-" + tabcounter, ti = time + "", dt = date + "", li = $( tabtemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ).replace(/#\{time\}/g,ti).replace(/#\{date\}/g,dt).replace(/#\{alertid\}/g,alertid) ), tabcontenthtml = desc || "tab " + tabcounter + " content."; tabs.find( ".ui-tabs-nav" ).append( li ); tabs.append( "<div id='" + id + "' style='box-shadow:10px 10px 50px #888;'><p>" + desc + "</p></div>" ); tabs.tabs( "refresh" ); tabcounter++; } html page<!-- begin snippet: js hide: false -->
you have create object using jquery, add id , style , append it. this:
$('<div></div>').attr('id', ...)... if doesn't work, remember when create object way can bind event listener using .on() function :)
Comments
Post a Comment