CODEWITHSUNDEEP
javascriptjquerydom
gandil
gandil

Reputation: 5418

Bind JQuery event to html created after pageload via jquery

I am developing a jquery module for add delete edit view etc. My problem is when page load complete, a list of items populate. After selecting an item this item's subitems loaded via jquery and html built, appended. But on this table event not fired up. Jquery Live is no longer available. Instead "On" is not working.

I tried :

$(document).on('click', selector , function () { foo(); });

But when a button is clicked it triggers other buttons as well.

My code is below. I have a working code except links on table which loaded by jquery.

var myModule = {
    el: {
        listbutton: $('#list-button'),
        listcontainer: $('#list'),
        detailbutton: $(".item-detail"),
        deletebutton: $(".item-delete"),
        editbutton: $(".item-edit")
    },  
     init: function() {
     ...
     myModule.el.listbutton.on("click",myModule.getMainData);
    },

    getMainData: function() {
        ...
        success: function(data) {
                myModule.BuildTable(data.Value.DataList);
        }
        ...
    },
    BuildTable: function (hws) {
        var c = "";
        c += "<table>";
        $.each(hws, function() {
            c +=
                '<tr>' +
                    '<td>' + this.Title + '</td>' +
                    '<td><a href="#" class="item-detail"></a></td>' +
                    '<td><a href="#" class="item-edit"></a></td>' +
                    '<td><a href="#" class="item-delete"></a></td>' +
                '<tr>';
        });
        c += "</table>";
        myModule.el.listcontainer.empty().append(c);
        myModule.TableLinks();
    },

    itemDetails: function () {
        alert("Detail clicked");
    },
    itemDelete: function () {
        alert("Delete clicked");
    },
    itemEdit: function () {
        alert("Edit clicked");
    },

    TableLinks: function () {
        $(document).on('click', myModule.el.detailbutton, function () { myModule.itemDetails(); });
        $(document).on('click', myModule.el.deletebutton, function () { myModule.itemDelete(); });
        $(document).on('click', myModule.el.editbutton, function () { myModule.itemEdit(); });
    },

};

myModule.init();

Upvotes: 1

Views: 656

Answers (4)

code-jaff
code-jaff

Reputation: 9330

your approach using on is exactly what you need, but should have been bit more careful on constructing the element object 

el: {
    listbutton: '#list-button',
    listcontainer: '#list',
    detailbutton: ".item-detail",
    deletebutton: ".item-delete",
    editbutton: ".item-edit"
},

and use it like this 

init: function () {
    $(myModule.el.listbutton).on("click", myModule.getMainData);
},

what you did is 

TableLinks: function () {
    $(document).on('click', myModule.el.detailbutton, function () { myModule.itemDetails(); });
...
},

which is similar to and which is wrong 

TableLinks: function () {
    $(document).on('click', $(".item-detail"), function () { myModule.itemDetails(); });
    ....
},

working fiddle

Upvotes: 0

Shailesh Vaishampayan
Shailesh Vaishampayan

Reputation: 1796

Can you try following:

  TableLinks: function () {
    $(document).on('click', 
            ".item-detail", 
            function (ev) { 
               myModule.itemDetails(); 
               ev.stopPropagation();
            }
    );
    $(document).on('click',
           ".item-delete",
           function (ev) {
               myModule.itemDelete(); 
               ev.stopPropagation();
           });
    $(document).on('click',
            ".item-edit",
            function (ev) { 
                   myModule.itemEdit(); 
                   ev.stopPropagation();
            });
   },

Upvotes: 1

Webbanditten
Webbanditten

Reputation: 880

You have to do something like this to use the "on" method. 

$("table").on("click", myModule.el.detailbutton, myModule.itemDetails());

UPDATE: Just noticed, you have to used a selector not a jQuery object in the second parameter.

So $("table").on("click", ".item-detail", myModule.itemDetails());

Upvotes: 1

Vinay Pratap Singh Bhadauria
Vinay Pratap Singh Bhadauria

Reputation: 9947

you need the delegation

$("selector on which item is added").on("click", "new item selector", function(){    

});

ON and Delegate

Upvotes: 1

Related Questions