Firing event for two times in a Table

I am trying to fire parent click event whenever an input change happens. Below is my code, it is firing Click event for two times.

                  $('TABLE TBODY TR TD INPUT').change(function()
                  {
                   $(this).parents('TD').click();
                  });
                  $('TABLE TBODY TR TD').click(function()
                  {
                   alert("Clicked me...");
           开发者_StackOverflow社区       });

Here is my HTML Code

      <table>
      <tr><td>foo<input type="radio"></td><td>foo<input type="checkbox"></td></tr>
      <tr><td>foo<input type="radio"></td><td>foo<input type="checkbox"></td></tr>
      <tr><td>foo<input type="radio"></td><td>foo<input type="checkbox"></td></tr>
      </table>

Where is the mistake...

$('TABLE TBODY TR TD INPUT').change(function() {
    clicky(this.parents('TD'));
});
$('TABLE TBODY TR TD').click(function clicky(parentElement) {
    alert("Clicked me...");
});

so the input is also in td so both are being clicked. this only returns one alert, but I have a feeling you dont want to alert, but rather change the parent element.

but I bet you probably want the following

$('TABLE TBODY TR TD INPUT').change(function() {
    clicky($(this).parents('TD'));
});

 function clicky(parentElement) {
    $(parentElement).toggleClass('clicked');

};

live example: http://jsfiddle.net/nFtzJ/

here every time the input changes, the parent <td> has the class .clicked toggled, of course this can be changed, but its almost a faux pas to use alert(); in production.

try something like. this

$('TABLE TBODY TR TD INPUT').change(function() {
   alert("Clicked me...");
});