Jquery on event not working for Dynamic elements

Question

$(".spanCont:first .collection_shop").on("click",function(){
            var current_item = $(this);
            $.ajax({
                url: "ajax/abc.php",
                type: "POST",
                dataType: 'html',
                data: {collection_id: current_item.attr("value")},
                beforeSend: function(xhr) {
                    current_item.replaceWith("<div id='temp_div'></div>");
                }
            }).done(function(data){
                $(".spanCont:first .span-2, .spanCont:first input").remove();
                $("#temp_div").replaceWith(data);
            });
        });

This code should work for all static and dynamic click of elements with class .collection_shop but its only working for static elements.

Answer 1

You need other (delgation) version of on() for dynamic elements. Delegate event to static parent of the dynamically elements or you can use document / body etc.

$(document).on("click", ".spanCont:first .collection_shop", function(){
    var current_item = $(this);
    $.ajax({
        url: "ajax/abc.php",
        type: "POST",
        dataType: 'html',
        data: {collection_id: current_item.attr("value")},
        beforeSend: function(xhr) {
            current_item.replaceWith("<div id='temp_div'></div>");
        }
    }).done(function(data){
        $(".spanCont:first .span-2, .spanCont:first input").remove();
        $("#temp_div").replaceWith(data);
    });
});

You have

$(".spanCont:first .collection_shop").on("click",function(){

You need, for event delegation

$("static-parent-selector").on("click", .spanCont:first .collection_shop, function(){

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, you can use delegated events to avoid the need to frequently attach and remove event handlers, jQuery Docs

Answer 2

Use event delegation

$(document).on("click",".spanCont:first .collection_shop",function(){
//code
});

Answer 3

use .on()

Use Event Delegation

Syntax

$( elements ).on( events, selector, data, handler );

like this

$(document).on("click",".spanCont:first .collection_shop",function(){
   // code here
});

or

$('parentElementPresesntAtDOMready').on('click','.spanCont:first .collection_shop',function(){
   // code here
});

Answer 4

you should use event delegation for that

$(document).on("click",".spanCont:first .collection_shop",function(){
   //some operation
});

It helps you to attach handlers for dynamic elements

Answer 5

Another approach, a little kinder to your ui than setting event delegation from the root 'document'

Split the AJAX from the listener to it's own function and create a listener function that 're listens' after the DOM has been updated by the code in the ajax call.

It's good to separate anyway ( say in the future you want to trigger the ajax request from something else)

function ajaxCall() {

  /* ... do the ajax call and return data   */
 .....done(function() { 

  /* update the DOM et al */

  /* reset the listener */
  listen();

 });
}

function listen() {
 $(".spanCont:first .collection_shop").off("click").on("click",function(){
   ajaxCall();
 });
}
/* start */
listen();

like - http://jsbin.com/foruyapi/1/edit