return false on dynamically created element

Question

I'm trying to prevent an event on dynamically created elements.
I tried several ways but none worked.

On deafult, a click on the div containing the class opens a menu, and I want to disable that.
This is my code (please note I'm using jQuery 1.6.4 so I'm not able to use the "on" method).

    $(function() {
    $( document ).delegate( "span.highlight_mkt", "click", function() {
        return false;
    }); 
});

I have tried this using the "live" method as well but without any success.

Any help would be much appreciated.

Is the block definitely getting fired? Tried adding a breakpoint? — CodingIntrigue, Jan 03 '14 at 08:06
It's fired, if i'm adding an alert it will pop. But it won't stop the bubbling. — Nir Tzezana, Jan 03 '14 at 08:06
Can you also show the code from the bubbled event? How is that attached? — CodingIntrigue, Jan 03 '14 at 08:09
Well its an old code from a diffrent developer that worked here, and it's not even in jQuery. please note that using a regular "return false" on the item works, but not if its dynamically created. — Nir Tzezana, Jan 03 '14 at 08:13
It does add content but as I know the return false / stopPropgation / preventDefault should work. — Nir Tzezana, Jan 03 '14 at 08:20

score 0 · Answer 1 · answered Jan 03 '14 at 08:03

0

maybe this link helps you -> preventDefault

$(document).delegate("span.highlight_mkt", "click", function (e) {
    e.preventDefault();
    /* your code here */
});

EDIT

you tried this too?

$('span.highlight_mkt').live("click", function (e) {
    e.preventDefault();
    /* your code here */
});

answered Jan 03 '14 at 08:03

MaiKaY

4,422
20
28

try this with "live" again – MaiKaY Jan 03 '14 at 08:07
Tried it with "live" too, no success. – Nir Tzezana Jan 03 '14 at 08:08
and $('span.highlight_mkt').unbind('click'); ?! – MaiKaY Jan 03 '14 at 08:20

score 0 · Answer 2 · answered Jan 03 '14 at 08:04

0

This one should stops the event propagation:

   $(function() {
    $( document ).delegate( "span.highlight_mkt", "click", function(e) {
        e.preventDefault();
        e.stopPropagation();
        return false;
    }); 
});

answered Jan 03 '14 at 08:04

Christian

6,961
10
54
82

score 0 · Answer 3 · edited Jul 03 '14 at 15:24

What I understand from your question is you have span with highlight_mkt class in your html form with click event attached using selector or document. And you are loading using Ajax or dynamically creating other span with same class name.

So in order to prevent events on your dynamically created elements you can use .die() function with container name where you are attaching dynamically created elements as following:

$('container_selector span.highligh_mkt').die('click');

In this method click event will be fired only your elements which is not attached dynamically. If I understand you incorrectly please clarify your question.

What you did is you are attached event handler to document element or global container using .live() jquery function. So it is not good thing to do. I will explain later.

$('body').live('click','span.hihligh_mkt', function(e){
//Your code here. Which is doing some cool staff i believe :)
});

However if you want to prevent only for dynamically created elements do following:

$('body').live('click', 'span.some_class', function(e){

    // This part is needed in order to check weather it is attached dynamically
    // or it is predefined html objects
    if($(e.target).closest('#some_container').length==0)
    {
      //Your code here. Which is doing some cool staff i believe :) 
    }
});

So in above you will just check, does event fairing element is dynamically attached to container element or it is part original html. Of course this kind of method can be avoided if you will use event which will be attached individually to the the elements like following when DOM ready.

$('span.hihligh_mkt').live('click', funtion(e){});

In this case only elements which was exists in DOM ready will get handlers. Other dynamically attached elements will not have event handlers. Unless you are not doing deep cloning of span elements.

Another thing is here when you attaching event handler to body or other root elements it gives you slow performance. You can read about it here.

Since all .live() events are attached at the document element, events take the longest and slowest possible path before they are handled.

You can see some example here.

You understood my question perfectly, but this won't work as well. — Nir Tzezana, Jan 03 '14 at 08:19
Ok. How many elements you have and how you are attaching to click event? I mean what kind of selector you are using? So if you clarify it I think I really can help you. — Khamidulla, Jan 03 '14 at 08:21
I update my answer. I guess I predict correctly what you did. So, I did my best to answer your question. I hope it will help you to understand. — Khamidulla, Jan 03 '14 at 09:19

return false on dynamically created element

3 Answers3

Linked