Question

Possible Duplicate:
jQuery – on() function when a div is clicked, but not when a child of that div is clicked

$(oTrPlanning).prev().children('td').each(function () {
    this.onclick = setCountClick;
});

On click of TD setCountClick() is called but TD also contains a Textbox:

<td> 
    <input class="Input-InlineFilter" id="TextFirst"  type="text" value="">
</td>

So, when I start typing something on Textbox, setCountClick() is again called.
I want to call setCountClick() when TD is clicked, but not Textbox.

Answer 1

The click event bubbles up the DOM from the textbox to the td, all the way to body. If you don’t want textbox clicks to trigger the td click handler, you need to stop the bubbling:

$('#TextFirst').click(function (e) {
    e.stopPropogation();
});

Documentation for stopPropagation

To expand, you should be taking advantage of this bubbling to only bind one event handler for all tds:

// bind one handler to all tds
$(oTrPlanning).prev().on('click', 'td', function (e) {
    // ensure the clicked element is a TD
    if (this.nodeName === 'TD') {
        setCountClick(e);
    }
});

Documentation for nodeName

Be aware that if you are relying on the this operator anywhere inside of setCountClick, it may no longer work as expected. To fix that you would need to look into using $.proxy or bind when you call setCountClick:

setCountClick.bind(this)(e);

bind returns a new function that uses the argument you pass as the this parameter inside the new function. Then you execute that function and pass it your regular parameters.

Documentation for bind