CODEWITHSUNDEEP
jquery
user1888959
user1888959

Reputation: 329

jQuery .on() troubles

Ok guys, I've used .on before quite successfully, however, this time it isn't working as expected, because it's not recognizing dynamic elements at all!

see issue by visiting http://www.MetalGains.com . Click "view demo" and just login with the demo credentials. If you click on a 'pencil" you'll see the edit functionality work. However, if you add an asset, and then click on the pencil that was added, you'll see it doesn't work.

At some point this line of code is dynamically added: 

 <div class='edit-item'><a name='"+$id+"' href='#add-asset-"+status+"' class='edit'></a></div>

the javascript I want to invoke is below. Mind you, it DOES work on page load, just not on anything dynamic. What am I missing?

$(".edit-item .edit").on('click', function(){
    return false;
  }).each(function(){
            $(this).fancybox({
             afterClose: function(){
            //we have to remove this class so that if someone tries to add a new asset it will use the 
            //add script and not the update script
            $(".asset-form").removeClass("update");
            //We need to set the values back to empty so that they aren't prepopulated when someone 
            //tries to add an asset later.
            $(".asset-form :input[name='type']").val("");
            $(".asset-form :input[name='year']").val("");
            $(".asset-form :input[name='quantity']").val("");
            $(".asset-form :input[name='ounces']").val("");
            $(".asset-form :input[name='paid']").val("");
            $(".asset-form :input[name='date']").val("");
            $(".asset-form :input[name='notes']").val("");

            //we remove the hidden field that passes the asset id. 
            $(".asset-form :input[name='editId']").remove();



            }//end afterClose
    }); //end edit fancybox
}); //end each

By the way, this works perfectly:

   $(".note-img").on('click', function(){
return false;
}).each(function(){
    $(this).fancybox();
    });

In relation to this dynamically added content:

   <a href='#note-"+$id+"' class='note-img'></a><div class='note' id='note-"+$id+"'>"+$notes+"</div>

Upvotes: 1

Views: 70

Answers (3)

SivaRajini
SivaRajini

Reputation: 7375

Please refer the below code.

$('.edit-item').on('click', '.edit', function(){})

Upvotes: 0

Ram
Ram

Reputation: 144659

The correct way of using on for event delegation is:

$(document).on('click', '.edit-item .edit', function(){

Or:

$('#staticParent').on('click', '.edit-item .edit', function(){

In case that the edit-item is static:

$('.edit-item').on('click', '.edit', function(){

Actually on differs from old and deprecated live method, live delegates the event from document object, but with on method you should specify which static parent element or document object should be used for event delegation.

Upvotes: 4

designosis
designosis

Reputation: 5263

I've fixed this problem before by adding a selector context to the end like so ...

$(".edit").on('click', '.edit-item', function(){ ... })};

Upvotes: 0

Related Questions