Dynamic elements: How to prevent other jquery handlers from running

Question

I am trying to handle a click event for an element created dynamically (so can't use .click jQuery call) but at the same time, I don't want the default action to take place. Basically I want to show my custom UI instead of the default one.

jQuery(document).on('click', selector, function(e) {
    console.log('I got the event, let me try to stop other handlers ..');

    // none of these work
    e.preventDefault();
    e.stopImmediatePropagation();
    e.stopPropagation();

    // want show my UI here ...

    return false;
});

Also tried mousedown event.

But it doesn't work and the default UI still shows up.

Note: I dont control the default handler, can't change that.

Let's try to make more long term solution. How are you generating dynamic elements? Afaik, when you call document.createElement, it returns a DOM node, which you can wrap around the jQuery function. Please reply so I can try to answer this question. — Jekk, Nov 25 '16 at 03:54
@Jekk elements themselves are generated within Wordpress core, deep inside some Backbone.js I believe. Don't know basically. — rysv, Nov 25 '16 at 04:20
my answer to another question is suitable for this question as the problems are essentially the same https://stackoverflow.com/a/71534459/4356188 — clickbait, Mar 19 '22 at 01:15
This question is being discussed on Meta Stack Overflow in: "[How explicitly are we supposed to clarify the non-duplicacy of questions?](https://meta.stackoverflow.com/q/416698/3773011)" — Makyen, Mar 19 '22 at 13:57
This question is lacking significant information. In order to be able to actually be answered without guessing as to the issue/solution, this question would need to include information as to the HTML structure of the page and exactly which event(s) need to be prevented from firing and on what elements within the HTML structure. Without that information, the only real answer to this would be a broad tutorial on how to reverse engineer the existing page to first determine what event(s) need to be prevented on which HTML elements and then how to go about preventing those events from firing. — Makyen, Mar 19 '22 at 14:07

score 1 · Answer 1 · edited Mar 19 '22 at 18:19

1

You can remove the click events from the selector using off:

Here you go working snippet:

$("#test").html('<button class="click">Click me to fire event</button><button class="clicktocancel">Click me to remove event</button>');

$("#test").on("click", ".click", function() {
  console.log("clicked")
});

$("#test").on("click", ".clicktocancel", function() {
  console.log("click cancelled")
  $("#test").off("click", ".click")
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">
</div>

edited Mar 19 '22 at 18:19

clickbait

2,818
1
25
61

answered Nov 25 '16 at 03:51

Ajay Narain Mathur

5,326
2
20
32

doesn't seem to be helping my case. I added this and put a console log inside the handler but did not show up .. jQuery(document).off('mousedown', '.dashicons-edit', function(e) { console.log('Turn off mousedown handlers ...'); }); – rysv Nov 25 '16 at 04:21
1

@srvy : I have updated my answer with a working snippet, take a look you sure the same is done – Ajay Narain Mathur Nov 25 '16 at 05:08

score 1 · Answer 2 · edited Mar 19 '22 at 17:57

Problem is that the events execute in first come first serve basis. So that means if other click events were bound before yours then that executes first in the chain, to overcome this issue you can remove all the click events bound to the element using off() and then add your event handler.

So write this line of code before your script

jQuery(document).off('click', selector);

Note: off() removes only the events that were attached using on()

Dynamic elements: How to prevent other jquery handlers from running

2 Answers2