I have the following jquery code

$(".delete").on('click', function (e){
    e.preventDefault();
    var id = $(this).prop('id');
    console.log('Delete button id: '+id);
    var formWrapper = $(".form-wrapper:nth-child("+id+")");
    console.log(formWrapper);
    formWrapper.remove();
});

the delete .delete is on a button inside a form

<button class="btn btn-danger delete">-<button>

and the button is loaded on the paged ynamically after the page has loaded. So I used the on function to attach the click event on it. But it won't work and the function is never called. Isn't on supposed to work not only for elements that are on the page during load but for those that get loaded afterwards?

I have the following jquery code

$(".delete").on('click', function (e){
    e.preventDefault();
    var id = $(this).prop('id');
    console.log('Delete button id: '+id);
    var formWrapper = $(".form-wrapper:nth-child("+id+")");
    console.log(formWrapper);
    formWrapper.remove();
});

the delete .delete is on a button inside a form

<button class="btn btn-danger delete">-<button>

and the button is loaded on the paged ynamically after the page has loaded. So I used the on function to attach the click event on it. But it won't work and the function is never called. Isn't on supposed to work not only for elements that are on the page during load but for those that get loaded afterwards?

• javascript
• jquery

Share Improve this question Follow asked Feb 26, 2014 at 10:44 ApostolosApostolos 8,1211717 gold badges8787 silver badges158158 bronze badges 1

• Please, read the DOC, all is clearly explains. You could use the search field on this site too... – A. Wolff Commented Feb 26, 2014 at 10:50

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 5

You are saying that the particular button is getting loaded to the DOM dynamically, so in this context you have to use event-delegation to make your code working.

Normally your code will register event for the element with the class .delete immediately after the DOM loaded. Actually we dont have any elements with that identity at that time, So this context is opt for event-delegation.

I actually dont know the exact dom structure of yours, so that i have used document to delegate the click event, But you should prefer some static parent of that element to implement it,

Try,

$(document).on("click",".delete", function (e){

You need to use event delegation for dynamically generated elements. thus use .on() using delegated-events approach.

i.e.

$(document).on('event','selector',callback_function)

Use

$(document).on('click',".delete", function (e){

In place of document you should use closest static container.

The delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, we can use delegated events to bind the click event to dynamically created elements and also to avoid the need to frequently attach and remove event handlers.

you should either use,

$(document).on('click',".delete", function (){});

or

$(".delete").click(function(){});

You can try jquery delegate() Method.

In jquery version 7 there was a term live however in latest one its removed and replace with delegate

you can check below example

HTML

< div class="delete"> Click Here < /div >

Javascript

$(document).delegate( ".delete", "click", function() {
 alert("Hi")
});

This might help: http://jsfiddle/webcarvers/7Qtd7/

HTML:

<button id="one" class="delete"type="button">Id on me</button>
<div id="one">This is the div to remove</div>

JS:

$(document).ready(function(){
$("button.delete").on('click', function(){
   var id = $(this).attr("id");
    $("div#"+id).remove();
});
});