JQuery - add onclick to TR

Question

I use Richfaces and one of rich: dataTable generates this html:

<form id="scheduleForm">
  <table id="scheduleForm:rowList">
    <tr>
      <td></td>
    </tr>
    <tr>
      <td></td>
    </tr>
    <tr>
      <td></td>
    </tr>
  </table>
</form>

I want to act by clicking on TR for this table. How can i do this? The following also works for other tables on the page, and I get alert () for other rows, and I don't want this.

        jQuery('#scheduleForm:rowList tr').click(function(event) {
            alert(1);
        });

O ':' char. It is created by Richfaces.

Source:

<h:form id="scheduleForm">
<rich:dataTable id="rowList">
</rich:dataTable>
</h:form>

Answer 1

I know that :JSF / RichFaces is being created. I used to have problems with :. This is probably not what jQuery people in ID expected. They use it for selectors. What you can do is:

jQuery('table[id = "scheduleForm:rowList"] tr').click(...)

Check out http://jee-bpel-soa.blogspot.com/2009/04/tips-and-tricks-on-jquery-and-richfaces.html

Answer 2

. .

jQuery(document.getElementById('scheduleForm:rowList').getElementsByTagName('tr')).click(function(event) {
          alert(1);
        });

Answer 3

, tr id.

<form id="scheduleForm">
  <table id="scheduleForm:rowList">
    <tr id="tr1">
      <td></td>
    </tr>
  </table>
</form>

jQuery('#tr1').click(function(event) {
    alert(1);
});

Answer 4

:

jQuery('#scheduleForm:rowList>tr').click(function(event) {
            alert(1);
        });

":" id. < , .

Answer 5

You have a colon :in the ID attribute. Colon is of particular importance in jQuery selectors, so you need to get away from it like this:

jQuery('#scheduleForm\\:rowList tr').click(function(event) {
      alert(1);
});

Answer 6

The: generated by JSF. You can also set prependId = "false" in the form. Then just use:

jQuery('#rowList tr').click(function(event) { alert('hello'); });

and only this table will be selected.

Answer 7

jQuery("#rowList").on("click", "tr", function(event) { 
    alert($(this).id); 
});