Question

Got some solved troubles, but want to ask, maybe here is another solution. Here is a situation.
Got aspx page. With some code behind functions, that get data from DB. Functions called and data returned through JQ in table. Data prepared by server to math html format.

$.ajax({
            type: "POST",
            url: "somePage.aspx/foo",
            data: "{ 'Id' : '" + ID + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function(msg) {
                $("#brandTable").html(msg.d);
            }

Each returned row is looking like this (as is):

<tr btcsId='152' id='btcsId_152' onclick='brandClick(9,24,152)'>
<td class='DataGridItem' style='padding:3px; margin:0;font-weight:bolder;'>something<input type='hidden' id='brandID_btcsId152' value='24' brandName='something'/></td>
</tr>

table markup:

<table class="DataGrid" id="brandTable" style="padding: 0px; margin: 0px; width:100%;border-collapse:collapse;table-layout:fixed;word-wrap:break-word;" border = "0" cellspacing="0" cellpadding="0">
    </table>

So, the problem was, that event onclick not fired just in ie7. ie8,ie9 works fine. After some thoughts, i decided to add this code immediately afrter table filling. In other words reinit event for each row.

$("[id^='btcsId_']").each(function () {
    $(this).click(function () {
    var thisID = $(this).attr("id");
    brandClick(specialityID,$("#"+thisID +" > TD > INPUT").val(),$(this).attr("btcsId"));
    });
});

After that it seems work fine. But is it correct? Maybe there is some other way?

Answer 1

The bast way would bo using delegate() or on() (jQuery > 1.7) to delegate to your table Element the handling of those events: this works also for elements that are added dinamically

$("table#idofYourTable").on("click", "[id^='btcsId_']", function () {
    var thisID = this.id;
    brandClick(specialityID,$("#"+thisID +" > TD > INPUT").val(),$(this).attr("btcsId"));

});