Changing the background of a <td> by firing a click event is not working

I have a requirement hope i can get answer here.

I am using a theme in my web application. That will style the Table as By the default table rows will have colors alternatively as shown below.

The colo开发者_如何学Cr will be changed whenever i click on any of that Checkbox or radio buttons(Assumes we are clicking on checkbox means we are clicking on ).But if i change the property of checkbox programatically (with exclusive buttons), style is not effecting on that as below.

for that i have written a code to manually fire Click event. But it is not working.. Please someone help me. Below is my code.I can't paste HTML, Sorry.

  $('TABLE TBODY TR TD INPUT').change(function() {     
       if($(this).prop('checked'))
       {
           S(this).parents('TD').click();
       }
  });     

You have a few problems in your change handler:

   clicky(this.parents('TD'));

First of all, there is no clicky function visible where you're trying to use it. Second, this is a DOM object that doesn't have a parents method.

If you want to change the background color when someone clicks on the button itself, then you can use closest right in the change handler:

$('TABLE TBODY TR TD INPUT').change(function() {
    $(this).closest('td').css('background-color', 'gray');
});

For example: http://jsfiddle.net/ambiguous/V8c3e/

If you want the background to change if they click anywhere in the table cell, then bind a click handler right to the table cell:

$('TABLE TBODY TR TD').click(function() {
    $(this).css('background-color', 'gray');
});

For example: http://jsfiddle.net/ambiguous/V8c3e/1/

I can see a lot of potential issues with your code, but this could be due to the lack of code/context.

Try this:

function changey(elem) {
    $(elem).css('background-color','gray');
}

$(document).ready(function() { // this line is very important

    $('TABLE TBODY TR TD INPUT').change(function() {     
        changey((this).closest('td'));
    });  

    $('TABLE TBODY TR TD').click(function () {   
        changey((this).closest('td'));
    });

});

I don't see any of the code that you mention being "below".

But, if I'm understanding the question correctly, are you sure you're firing the event on the right object? And have you done any testing to see if the "manually" fired click event (I assume by doing either

 $('some selector').trigger('click')

or

 $('some selector').click())

is actually triggering your click callback?

First, you're only triggering the click event if the input is checked - what if the user clicks on the input to uncheck it? I assume the styling for the TD is supposed to be a toggle.

Second, You have S(this) - it should be $(this).

Third, you're forcing a click on all td parents (which is possibly fine). Do you maybe actually intend $(this).parents('td').first().click()?

Fourth - if the input is being changed by a click... well, then its parent is already getting a click event. Maybe you're triggering two click events (one from your change event, and one from the user's actual click), and they're cancelling each other out? If you need this change event for computational/manual input changes ($(this).change(), for example), then you'll need to detect whether the change was fired by a click event or not - or put a click event on the input, that stops propogation.