Omit the element from the event listener

Question

Omit the element from the event listener

Is there a way to prevent the image from triggering a click event in this code snippet?

$('#templtable .trhover *:not(#infoimg)').live('click', function(event) {
      event.stopPropagation();
      $(this).toggleClass('selected');

$('#infoimg').click(function(event) {
          console.log("infoimg");
    event.stopPropagation();
});

Below is the structure of the table:

<table><tr class='trhover'><td><img id='infoimg' src='/images/icon-info.gif' alt='Details'><input type='checkbox' class='followup' id='1' value='234234'></td><td>234234</td></tr><table>

Despite attempting to exclude the image, the image still retains its click event functionality. Any ideas on how to fix this issue?

Appreciate any help you can provide.

jquery css

Answer 1

Answer №1

It appears that your code is not valid. However, if you wish to prevent the img element from triggering the click event, you can use the following selector: $('tr *:not(img)'). Please note that this will still trigger the event when clicking the img due to event bubbling. To prevent this, you must bind an event to stop the propagation.

$('.trhover *:not(#infoimg)').bind('click', function(event) {
    event.stopPropagation();
    $('body').append('click -> '+event.currentTarget.tagName+'<br />');
});
$('#infoimg').click(function(event) {
    event.stopPropagation();
});

You can test this solution here: http://jsfiddle.net/pNaaD/
For a version with added rows, try this link: http://jsfiddle.net/Zxk8R/

Answer 2

It appears that your code is not valid. However, if you wish to prevent the img element from triggering the click event, you can use the following selector: $('tr *:not(img)'). Please note that this will still trigger the event when clicking the img due to event bubbling. To prevent this, you must bind an event to stop the propagation.

$('.trhover *:not(#infoimg)').bind('click', function(event) {
    event.stopPropagation();
    $('body').append('click -> '+event.currentTarget.tagName+'<br />');
});
$('#infoimg').click(function(event) {
    event.stopPropagation();
});

You can test this solution here: http://jsfiddle.net/pNaaD/
For a version with added rows, try this link: http://jsfiddle.net/Zxk8R/

Answer 3

Answer №2

Oh no, your code needs some fixing...
First of all, make sure to close your <tr> tag properly and remove that extra </td>.
Secondly, using end() cancels your filter unnecessarily and remember that live() is deprecated now - switch to using on() instead.
If you want the click event to work on elements with class .trhover, try this:

$('.trhover').on('click', function(){});

If you don't want <img> elements to respond to click(), follow czerasz's suggestion.
Also, why are you filtering the checkbox? What should it be doing?

Answer 4

Oh no, your code needs some fixing...
First of all, make sure to close your <tr> tag properly and remove that extra </td>.
Secondly, using end() cancels your filter unnecessarily and remember that live() is deprecated now - switch to using on() instead.
If you want the click event to work on elements with class .trhover, try this:

$('.trhover').on('click', function(){});

If you don't want <img> elements to respond to click(), follow czerasz's suggestion.
Also, why are you filtering the checkbox? What should it be doing?

Omit the element from the event listener

Answer №1

Answer №2

Similar questions

Response received from PHP POST request using Ajax

Tips for positioning a Wordpress navigation bar to the right of a logo

CSS - Combining underline, striikethrough, and overline effects with customized styles and colors within a single element

Enhance the functionality of jQuery within a React application by creating custom chained jQuery functions

Compiling 'react-scripts' to include a few images as data URIs within the CSS file

Guide to leveraging clsx within nested components in React

Issue with IE7 causing div elements to slide off the screen on specific WordPress pages

Over-extended Affix in Bootstrap 3.1.0

Jquery fails to display errors or provide validation feedback

The CSS properties intended for ion-button elements are not taking effect

Adjust the height of column divs to equal the height of their parent container

Sending simple form information through AJAX to a PHP web service

The order of CSS precedence shifts even when the class sequence is the same

Problem with AJAX/HTTP communication

The total sum of various divs containing a mix of numbers and letters

List of JQuery Elements

Reliable drop-down box is not functioning properly

Is the Site Header displayed depending on the scroll position and direction of scrolling?

Guide to displaying a template using Vue.js

Include a lower border on the webview that's being shown