Question

In my project I updated the used jQuery version from 1.4.2 to 1.7.2. Now I observe some unexpected behaviour when handling the click event handler of <tr> elements.

Multiple sites contain tables with a radio button in the first column. So the HTML looks like this

<table>
  <tbody>
    <tr onclick="selectOnClick(this)">
      <td><input type="radio" .... /></td>
      ......
    </tr>
...

In a separate js file there’s the definition of the JS function

function selectOnClick(row) {
  $(row).children('td').children('input :first').click();
  $(row).children('td').children('input :first').click();
  $(row).children('td').children('input :first').click();
}

So whenever an element inside the table’s row is clicked, the first input element is clicked. I can’t tell why it was needed to invoke the same statement in the function 3 times, but there was a reason for it.

My problem is that after the jQuery update (v.1.4.2 –> 1.7.2) one mouse click on the row produces hundreds of events instead of a single one. The browser is so busy to handle them that it looks like it doesn’t react at all. If I modify the function to invoke click() only once it doesn’t change.

Can someone tell me what could be the reason for that effect.

Answer 1

Every time you trigger a click event on one of the child elements, it bubbles back up to the tr causing an infinite loop. Try triggering the handler instead of the event.

function selectOnClick(row) {
    $(row).children('td').children('input :first').triggerHandler("click");
}

Note however this will only trigger jQuery bound events.