No response observed upon clicking on the li element within the personalized context menu

Question

No response observed upon clicking on the li element within the personalized context menu

I created a custom context menu that pops up when you click on an li element within an unordered list. I'm trying to trigger an alert when clicking on an li item inside the context menu, but it's not working as expected.

To handle this dynamic content creation, I used the jQuery function on (replacing delegate()):

$(".contextMenu").on("click", "li", function() {
    var className = $(this).attr("class");
    alert("Class name:" + className);
});

However, nothing happens when I click. I'm stuck and not sure what the issue is.

If you want to test it out, add the following script to your Tampermonkey extension:

// UserScript code goes here

You can find the target page here.

javascript jquery css tampermonkey

Answer 1

Answer №1

Due to the method of adding <li> elements using the append() function, the click event on li elements is directly bound instead of delegated. This means that the events will only work if the element is already present in the DOM and not on dynamically created elements.

Therefore, you will need to implement an event delegation here with a higher level element such as body or document.

Here is how you can do it:

$(document).on("click", ".contextMenu li", function() {
  var c = $(this).attr("class");
  alert("Class Name:" + c);
});

Answer 2

Due to the method of adding <li> elements using the append() function, the click event on li elements is directly bound instead of delegated. This means that the events will only work if the element is already present in the DOM and not on dynamically created elements.

Therefore, you will need to implement an event delegation here with a higher level element such as body or document.

Here is how you can do it:

$(document).on("click", ".contextMenu li", function() {
  var c = $(this).attr("class");
  alert("Class Name:" + c);
});

No response observed upon clicking on the li element within the personalized context menu

Answer №1

Similar questions

Is there a way to ensure that the text inside the red div is fully contained within the div, so that when it is expanded, all the text will be displayed properly?

Extending a Typescript class from another file

When a DIV is clicked, trigger the fadein effect on another DIV; when the same DIV is clicked again, fade

Trigger a function when clicking outside the element, similar to how a Bootstrap modal is closed

submission of form data and automatic redirection to another page

Nuxt.js implemented with Auth using jwt refresh tokens

The ng-change event in AngularJS is not being activated by IE 11

Creating a visually dynamic stack of images using javascript, jquery, and HTML

When loading a page for the first time, the Vue.js transition does not take effect

Executing javascript after an AJAX call within an on() method: Tips and tricks

Is there a similar function to -moz-linear-gradient in Chrome?

Creating Typescript types based on the values of other props: A guide

Is there a way to create a table cell that occupies zero space?

Dynamic HTML DOM element name changes

A textbox designed for use on both desktop and mobile browsers, utilizing jquery technology

What is the best way to trigger the scrollTo function after the list (ul) with images has finished reflowing?

Is it advisable to send a response in Express.js or not?

Access a portion of the redux state during server requests

Ensuring thoroughness in validation without the use of specific text strings

Having trouble getting the full width of a hidden div to work properly?