Making a TD clickable and an INPUT inside NOT

Question

I have the following html which calls a jQuery function from the datatables plugin to sort the column upon clicking the table header cell:

<th class="sorting" role="columnheader" tabindex="0" aria-controls="jobBonusSummary" rowspan="1" colspan="1" style="width: 67px;" aria-label="Name: activate to sort column ascending">
<span class="filter_column filter_text">
<input type="text" rel="1" value="Name" class="text_filter search_init">
</span></th>

My th is clickable and I want to make either the span or the INPUT NOT clickable (whichever works!) Right now if I click into the INPUT for instance, it sorts the column when I want it to do nothing unless I click in the area around the INPUT.

Any ideas on how I can do this?

Place your jquery code here.

Bhojendra Rauniyar
– Bhojendra Rauniyar

2014-01-22 11:49:13 +00:00
Commented Jan 22, 2014 at 11:49 — Bhojendra Rauniyar
– Bhojendra Rauniyar, Commented Jan 22, 2014 at 11:49

Christoph · Accepted Answer · 2014-01-22 11:51:52Z

1

since events bubble up in the dom tree, your click into the input field eventually reaches the surrounding th. You manually need to stop the propagation to prevent that.

$("input").on("click", function(e) {
  e.stopPropagation();
  // Here you can do additional stuff, which in your case might not be needed
});

the jquery docs

answered Jan 22, 2014 at 11:51

Christoph

51.4k22 gold badges103 silver badges129 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Making a TD clickable and an INPUT inside NOT

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related