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 f

Solution 1:

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

Solution 2:

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.

Solution 3:

you should either use,

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

or

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

Solution 4:

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

Solution 5:

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