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

Tips for maintaining the hash fragment of a URL when setting up Single Sign-On (SSO) with Shibboleth

Transfering data to Handlebars while rendering a template

How can I implement two unique custom scrollbars on a single webpage?

Resizing columns in HTML table remains effective even after the page is refreshed

Dynamic header following the scroll position

Technique for adding an element's attribute to a span based on the element's class

Sending Profile Picture and Description to PHP using AJAX and jQuery

The functionality of tinymce setContent can only be activated by directly clicking on it

Place two divs within a parent div that can adjust its width dynamically

Avoiding Navbar Link Clicks due to Z-Index

Incorporating custom validation methods with jQuery FormValidation Engine

Display a modal popup form in ReactJS when a particular key is pressed

"One specific div in Safari is having trouble with the external stylesheet, while the other divs are functioning properly- any

Generating values in a loop - mastering the art of creating data points

Using radio buttons and setting the attribute to 'checked' does not function properly in Internet Explorer 7

What is the best way to center the 'email promo' text in the top navigation bar alongside the image and other text links?

Can you explain why this unexpected bootstrap positioning is happening?

Can AJAX be exploited by hackers?

Guide on updating directory images by uploading a new one directly onto the site

The AJAX event is failing to send data