Question

I am new to jQuery. I have a dynamically generated row with unique ID’s. I need to apply a jQuery function to each row.

My jQuery function starts immediately after the page is loaded instead of waiting for me to click.

<script type="text/javascript">
$(function popup() {
  $(this).hover(function() {
    $('div#pop-up').show();
  }, function() {
    $('div#pop-up').hide();
  });
});
</script>

I want the jQuery popup() function to do its thing when I click on the ‘tr’ row, and only affect that particular row.

<tr id="abc" onclick="popup()">
  <td>blah</td>
</tr>
<tr id="def" onclick="popup()">
  <td>blah</td>
</tr>
<tr id="ghi" onclick="popup()">
  <td>blah</td>
</tr>

Answer 1

Use a selector to specify which element(s) the function should apply to, and then pass that selection into the appropriate jQuery method:

$('tr').click(
    function(){
        popup();
    });

In the above the function popup() will be called only once someone clicks on a tr element (or its children, since the click will bubble).

You could also use on(), if any of the tr elements are to be added dynamically following the initial DOMReady event:

$('tbody').on('click','tr',function(){
    popup();
});

With on() the events are bound to the element closest to the dynamically-added elements, and the method is passed an event-type (click) and, optionally, a selector (tr), to determine which elements will trigger the function(s) found within the method.

Though remember, depending on what element(s) you’re using for the pop-up, that an id can be used for only one unique element within the document.

Reference:

• The jQuery API selectors index.
• on().