Click function not working on dynamically added div

Question

<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">&nbsp;</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">&nbsp;</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">&nbsp;</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 one is acknowledged</p>
 </div>
 <div id="tabs-2" style="box-shadow: 10px 10px 50px #888888;">
  <p class="alert-text">This one is cleared</p>
 </div>
 <div id="tabs-3" style="box-shadow: 10px 10px 50px #888888;">
  <p class="alert-text">This one is active</p>
 </div>
</div>

I am adding 3 divs statically and remaining are added based on jquery call. The click function I apply for class "alert-header" is working fine for static div's click event but not working for dynamically generated div's.. Please give me solution...

Here is my code:

This is that click event call

$('.alert-header').click(function()
 {
  alert("Called now");
});

This is where Im adding the dynamic div and also for some static content:

var tabTitle = $( "#tab_title" ),tabContent = $( "#tab_content" ),tabTemplate = "<li><span class='color-bar'>&nbsp;</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 over
var tabs =$( "#tabs" ).tabs({
 active: false,
 event: "mouseenter",
 collapsible: true
}).mouseleave(function () {
 $(this).tabs({
  active: false
 });
});


// modal dialog init: custom buttons and a "close" callback reseting the form inside
var dialog = $( "#dialog" ).dialog({
 autoOpen: false,
 modal: true,
 buttons: {
  Add: function() {
   addTab();
   $( this ).dialog( "close" );
  },
  Cancel: function() {
   $( this ).dialog( "close" );
  }
 },
 close: function() {
  form[ 0 ].reset();
 }
});

// addTab form: calls addTab function on submit and closes the dialog
var form = dialog.find( "form" ).submit(function( event ) {
 addTab();
 dialog.dialog( "close" );
 event.preventDefault();
});

// actual addTab function: adds new tab using the input from the 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 -->

Look for [event delegation](http://learn.jquery.com/events/event-delegation/) method. — Bhojendra Rauniyar, Nov 19 '14 at 09:09
use [event delegation](http://learn.jquery.com/events/event-delegation/) ... instead of `$('.alert-header').click(function()` try `$(document.body).on('click','.alert-header',function(){});` — Kartikeya Khosla, Nov 19 '14 at 09:10
Thanks Mr.Kartikeya. Its works now but how can I get the alertId value inside the function?? — , Nov 19 '14 at 09:18

score 0 · Answer 1 · answered Nov 19 '14 at 09:10

You have to create an object using jquery, add id and style and then append it. Like this:

$('<div></div>').attr('id', ...)...

If it doesn't work, remember that when you create an object this way you can bind an event listener to it using .on() function :)

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

0

Event Delegation

$('body').on('click','.alert-header',function(){
  //your code here
});

Get value of dynamic element like:

$('body').find('#alert-id').val();

edited Jun 20 '20 at 09:12

Community

1
1

answered Nov 19 '14 at 09:12

Manwal

22,117
10
57
89

Ya.. Thank you, Its working now.. But how can I get the value of hidden input attribute's value?? alertId – Nov 19 '14 at 09:19
@RamprakashPalanivel see updated answer. – Manwal Nov 19 '14 at 09:32
No ji.. Its not working.. It given 'undefined' only. I dont have id attribute for that div. But that hidden field has the id attribute but to make it unique if I add alertId with that means how can I identify that unique Id inside the click event – Nov 19 '14 at 09:42

Click function not working on dynamically added div

2 Answers2

Event Delegation