Return False On Dynamically Created Element

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

Solution 1:

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 */
});

Solution 2:

This one should stops the event propagation:

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

Solution 3:

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 objectsif($(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.