Turn off 'order' within header row

lyndonwil

I have a header row that is made up of a heading and an input search box.

I want to be able to click into the input box and enter search criteria. Whenever i click the box, it automatically sorts the column.

The column does need to be sorted and this behaviour is fine. All i want to do is to turn the sorting off when i click the input box.

I've played around with the off event. I.e. $('#datatable').off( 'order.dt'); or $('#datatable').off( 'order');

I've also tried to use event.stopPropagation()

So far, I can't get this to work.

Any ideas?

Lynd

allan

Use `stopPropagation()` to stop the event bubbling up to the sort node / event handler.

See:

http://api.jquery.com/event.stoppropagation/
https://developer.mozilla.org/en-US/docs/Web/API/event.stopPropagation

Allan

lyndonwil

Thanks for the response allan,

I can get this working if i use the following

[code]
$('')
.prependTo( $(columnTh))
[/code]

So yes, the onclick event does work..

I know this is a little off subject, but why doesn't the jQuery .On event work ? I.e.

[code]
$(document).on( 'click', '#datatable', function (event) {
event.stopPropagation();
alert('DOESNT FIRE');
});
[/code]

or

[code]
$('#datatable thead th input[type=text]').on( 'click', function (event) {
alert('DOESNT FIRE');
} );
[/code]
Thanks

Lynd