JQuery not recognizing click on table row

Question

I'm using JQuery template for the data for my table... and the CSS recognizes the table rows inside the query template script and styles them how I want... but for some reason I can't call a $().click on those same rows using the same identifier. Here's the table code:

<script id="donorTemplate" type="text/x-jquery-tmpl">
<tr id="indexTR">
    <td>${Person.LastName}, ${Person.FirstName}</td>
    <td>${Address.Address1}</td>
    <td>${PhoneContact.PhoneNumber}</td>
    <td>${EmailContact.EmailContactx}</td>
    <td>${Company.CompanyName}</td>
    <td><a href="/Donation/Index?id=${Person.PersonID}">Add Donation</a></td>
    <td> <a href="/Person/Edit?id=${Person.PersonID}">Edit</a> &nbsp; <a href="/Person/Delete?    
id=${Person.PersonID}">Delete</a> &nbsp;
        <input type="hidden" id="hiddenField" value="${Person.PersonID}"/>
    </td> 
</tr>
</script>

<div id="searchresults">
<table id="donor-list">
<thead>
<tr>
    <th id="f" width="150">Name: </th>
    <th width="180">Address: </th>
    <th width="85">Phone: </th>
    <th width="150">Email: </th>
    <th width="100">Company: </th>
    <th width="100"></th>
    <th id="l" width="100"></th>
</tr>
</thead>
<tbody id="tableBody">

</tbody>
</table>

And the JQuery....

$("#donorSearch").submit(function (event) {
        event.preventDefault();
        var form = $(this);
        $.getJSON(form.attr("action"), form.serialize(), function (data) {
            $("#tableBody #indexTR").remove();
            $("#donorTemplate").tmpl(data).appendTo("#tableBody");
        });
    });

That's all dandy... but this doesn't work:

$("#indexTR").click(function () {
       alert('test');
    });

This is what I'm trying to do on a TR click:

var val = $("#hiddenField").val();
var personID = parseInt(val);
location.href = "/Person/Details?id=" + personID;

which worked before until I switched over to the JQuery template. Any suggestions? Thanks!

Wait... Do you have multiple elements with the same indexTR id? — gdoron
– gdoron, Commented May 2, 2012 at 0:32
I suppose... since I'm appending to the table that row every time with different data... but before I had the same table row inside a @foreach using the model instead, not JQuery template and the click worked for each row... — Nick B
– Nick B, Commented May 2, 2012 at 0:36
So you got invalid HTML change from id to class! and I think my answer should help you. — gdoron
– gdoron, Commented May 2, 2012 at 0:37
tried pointing it to the class instead... that doesn't seem to work either — Nick B
– Nick B, Commented May 2, 2012 at 0:46

gdoron · Accepted Answer · 2012-05-02 00:46:17Z

2

The <tr id= "#indexTR"> doesn't exist in the DOM when it was ready so using delegate event should do the trick:

$('#donor-list').on('click', '#indexTR', function(){
    alert('test');
});

For jQuery 1.5:

$('#donor-list').delegate('#indexTR', 'click', function(){
    alert('test');
});

Or attach the callback on every new creation of a row.

$.getJSON(form.attr("action"), form.serialize(), function (data) {
        $("#tableBody #indexTR").remove();
        $("#donorTemplate").tmpl(data).appendTo("#tableBody");
        // Now attach the event:
        $("#indexTR").click(function () {
           alert('test');
        });
    });

And you got the problem with multiple elements with the same id. as discussed in the comments of your question.

edited May 2, 2012 at 0:46

answered May 2, 2012 at 0:31

gdoron

151k59 gold badges302 silver badges376 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Nick B Over a year ago

The alert works (thank you!)... but this still doesn't work $('#donor-list').delegate('#indexTR', 'click', function () { var val = $("#hiddenField").val(); var personID = parseInt(val); location.href = "/Person/Details?id=" + personID; });

Nick B Over a year ago

it isn't finding the hidden field in each row?

Nick B Over a year ago

well... I shouldn't say it doesn't work... but it always redirects to the same page no matter which row I click on..

gdoron Over a year ago

@redBarron. Of course it does, you use id selector, which means it will grab the first element, you got invalid markup there too!

gdoron Over a year ago

@redBarron. Anyway it can be fixed like this: $('#hiddenField', this).val(). But you still have invalid markup.

|

Collectives™ on Stack Overflow

JQuery not recognizing click on table row

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related