CODEWITHSUNDEEP
javascriptjquery
Apostolos
Apostolos

Reputation: 8101

jquery on not working properly

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?

Upvotes: 0

Views: 1490

Answers (5)

Mayank Tripathi
Mayank Tripathi

Reputation: 1342

This might help: http://jsfiddle.net/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();
});
});

Upvotes: 0

Anand Deep Singh
Anand Deep Singh

Reputation: 2620

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")
});

Upvotes: 0

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67197

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){

Upvotes: 5

Anoop Joshi P
Anoop Joshi P

Reputation: 25527

you should either use,

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

or

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

Upvotes: 0

Satpal
Satpal

Reputation: 133403

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.

Upvotes: 5

Related Questions