Search code examples
jqueryclicklive

jquery issue with click when firering .on


I need to know what is going wrong here, when I try to run the following it does not work, not alert box no error nothing.

$(function() { 
$("tbody[name=leadstores]").on("click","tr",function(e){

alert("clicked");
});

});

Just wondering am I doing something wrong.

Forgot to say, that this script was working when I used

.live

here is the table

<table id="tableprod" style="width: 100%; ">
<thead id="storelocation" class="fixedHeader" style="min-width: 800px; ">
<tbody id="tbbody" name="leadstores">

<tr id="20">
<td name="street" class="company" style="width: 400px; padding-right: 2%; ">Shop 1012, Westfield Bondi Junction, 500 Oxford Street</td>
<td name="suburb" class="company" style="padding-right: 3%; ">Bondi Junction</td>
<td name="postcode" class="field" style="padding-right: 3%; ">2022</td>
<td name="state" class="field" style="padding-right: 3%; ">NSW</td>
<td name="phone" class="company">(02) 9388</td>
</tr>
<tr id="21">
<td name="street" class="company" style="width: 400px; padding-right: 2%; ">Kiosk KG17, Westfield Doncaster, 619 Doncaster Road</td>
<td name="suburb" class="company" style="padding-right: 3%; ">Doncaster</td>
<td name="postcode" class="field" style="padding-right: 3%; ">3108</td>
<td name="state" class="field" style="padding-right: 3%; ">VIC</td>
<td name="phone" class="company">(03) 9840</td>
</tr>
<tr id="23">
<td name="street" class="company" style="width: 400px; padding-right: 2%; ">Kiosk 66A, Macquarie Centre, cnr Herring & Waterloo Rd</td>
<td name="suburb" class="company" style="padding-right: 3%; ">North Ryde</td>
<td name="postcode" class="field" style="padding-right: 3%; ">2113</td>
<td name="state" class="field" style="padding-right: 3%; ">NSW</td>
<td name="phone" class="company">(02) 9889</td>
</tr>
</tbody>
</table>

Solution

  • The .live() can be the problem solver

    when your targeting DOM ( tbody[name=leadstores] in your case )

    is added dynamically after the page loaded.

    .live() listens on newly added DOM so that you can bind events with those

    dynamically added DOM.

    EDIT:

    Since .live() is deprecated in jQuery 1.7.x,

    $("#tableprod").on("click","tr",function(e){
        alert("clicked");
    });
    

    Try this