When a td element is clicked, the Textbox will also be clicked

Question

When a td element is clicked, the Textbox will also be clicked

Similar Question:
Dealing with jQuery on() when clicking a div but not its child

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

When a TD element is clicked, the function setCountClick() is executed. However, if the TD contains a Textbox:

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

Therefore, when inputting text into the Textbox, setCountClick() is called again. The desired behavior is to only call setCountClick() when clicking the TD, but not the Textbox.

javascript jquery html css

Answer 1

Answer №1

When a click event occurs, it travels up the DOM hierarchy from the textbox to the td, all the way to the body. If you want to prevent clicks on the textbox from triggering the td click handler, you should stop the event from bubbling:

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

Check out the documentation for stopPropagation

To optimize your code, consider utilizing this bubbling behavior by attaching only one event handler for all td elements:

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

More information about nodeName

If the use of the this keyword within the setCountClick function becomes problematic, consider using $.proxy or bind when calling setCountClick:

setCountClick.bind(this)(e);

bind creates a new function where the argument passed becomes the current context indicated by this. This allows you to execute the function with the desired context and parameters.

Learn more about the bind method

Answer 2

When a click event occurs, it travels up the DOM hierarchy from the textbox to the td, all the way to the body. If you want to prevent clicks on the textbox from triggering the td click handler, you should stop the event from bubbling:

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

Check out the documentation for stopPropagation

To optimize your code, consider utilizing this bubbling behavior by attaching only one event handler for all td elements:

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

More information about nodeName

If the use of the this keyword within the setCountClick function becomes problematic, consider using $.proxy or bind when calling setCountClick:

setCountClick.bind(this)(e);

bind creates a new function where the argument passed becomes the current context indicated by this. This allows you to execute the function with the desired context and parameters.

Learn more about the bind method

Answer 3

Answer №2

An issue arises with the event propagation from child elements to parent elements. A solution involves binding events in the following manner:

$(oTrPlanning).prev().on('click', 'td', setCountClick);

The setCountClick method will take the event as its first parameter, which can be examined as shown below:

function setCountClick(event) {  
   // Check if the click occurred on a TD element
   if ($(event.target).is('td')) {
        // Code to execute when a TD is clicked
   }
}

Answer 4

An issue arises with the event propagation from child elements to parent elements. A solution involves binding events in the following manner:

$(oTrPlanning).prev().on('click', 'td', setCountClick);

The setCountClick method will take the event as its first parameter, which can be examined as shown below:

function setCountClick(event) {  
   // Check if the click occurred on a TD element
   if ($(event.target).is('td')) {
        // Code to execute when a TD is clicked
   }
}

When a td element is clicked, the Textbox will also be clicked

Answer №1

Answer №2

Similar questions

Angular's UI router is directing users to the incorrect URL

Generate an HTML webpage with dynamic content using MySQL

There seems to be an issue with your SQL syntax that is preventing the data from being entered correctly into the database using Node.js, MySQL, and Express

Styling elements conditionally in React JS using inline styles

Replace Euro symbols in JavaScript Regexp with grouping

Struggling to use GSAP to control the timeline with my custom functions

Aligning a grid container in the middle

Simultaneous activation of CSS classes by multiple RouterLinkActive components

HTML stubbornly resists incorporating Javascript [UIWebView]

encountering issue alerts when using the MUI TextField module alongside the select function

Ways to calculate the total number of keys within a JSON object at a certain level

Show individual row information within a bootstrap modal upon clicking the edit button

Execute the getJSON calls in a loop for a count exceeding 100, and trigger another function once all

How are jQuery.ajax and XMLHttpRequest different from each other?

Change the output of Object.fromEntries

Having trouble with testing axios web service promises to return results using Jest in a Vue.js application

What's the best way to vertically center a div with a 100% width and a set padding-bottom on the screen?

Continuously invoking a function until jQuery's .post method has completed loading

Initiate a click action upon receiving a focus event

Only one specific SVG tag is affected by the CSS stylesheet