Question

<div class="hidden" id="build_blankrow">
    <span class="track_title"></span>
    <span class="track_time"></span>
    <span class="track_artist"></span>
    <span class="track_album"></span>
    <span class="track_number"></span>
    <span class="track_options">
        <span class="track_options_download"></span>
        <span class="track_options_addtoplaylist"></span>
        <span class="track_options_playnow"></span>
    </span>
</div>

This is a hidden DOM element used to render a results page for a search (AJAX). I clone(true) the above elements and append it to the page, after updating and filling in the valid information. The problem stems from the fact the elements within the class “track_options” should behave in alternate ways. I see other questions on StackOverflow that remove behavior completely by preventing the default action (will link at the end of this post) but I want to remove the onClick event inherited from the parent and add an action specific to each element.

Still new to StackOverflow, so please feel free to ask any questions you feel would be beneficial.

Thank you everyone for even a pointer in the right direction!

unbind onclick event for 'a' inside a div with onclick event

Answer 1

You’re quest is a little confusing, but I’ll try to give a complete break down of just a few of the many ways to achieve your goal.

• First

If you are trying to create a click for the parent Div that is not triggered by specific children then you can simple use event.stopPropagation() as so:

// Noticed I did not use an ID call here for your parent div, the reason is simple,
// You stated you use it like a "template" and clone it, or at least parts from it, thus it might 
// (depending on how you use it) have multiple positions in your document, thus, one set ID just 
// will not do.  So I pretended as if you had already added a similar named class to the parent
// div, thus calling forth this click function on ALL div's containing said class
$(".build_blankrow")
    //  This call to .live will ensure you can call the click function dynamically 
    //  on "future" created divs containing the same class name
    .live("click", function(e) { /* do work */ })
    //  This is called "chaining" in jquery
    //  Our .live click func returns the originally called '$(".build_blankrow")'
    //  ALSO: in NEWER jQuery, .live is replaced with .on
    //  Thus we dont need to make a new call just to get to its childrean
    //  .find will allow us to search the children for exactly what we need
    //  in this case we're grabbing the span with the class 'track_options'
    //  and setting its click func (this will effect its children) to stop propagation to parents
    .find(".track_options")
    .live("click", function(e) { e.stopPropagation(); });

• Second

You may not want that stop prop on all children of track_options, thus you make use of .filter(). This handy jQuery func will allow you to stop prop on exactly the inner elements of track_options you choose. See example below:

//  You will notice not much change at start
$(".build_blankrow")
    .live("click", function(e) { /* do work */ })
    .find(".track_options span")
    //  Here comes the change, gota love .filter
    //  Here I will get only the children elements for download and play now
    .filter(".track_options_download, .track_options_playnow")
    //  KEEP IN MIND, if your using NEWEST jQuery, then replace .live with .on
    // like so: .on("click", funct.....
    .on("click", function(e) { e.stopPropagation(); console.log("WHAT"); });

• Third

You could make use of CSS selectors in jQuery to come up with clever ways to reach each element as desired. Something like:

$(".build_blankrow")
    .on("click", function(e) { /* do work */ })
    //  Here I use simple CSS to filter out the autoplaylist child
    .find(".track_options span:not(.track_options_addtoplaylist)")
    .on("click", function(e) { e.stopPropagation(); });

Important jQuery Links used in previous code:

1. .live()
2. .on()
3. .click()
4. .find()
5. .filter()
6. .stopPropagation()
7. jQuery Selectors

Something else that maybe of interest (and I’d show example except I have to go deal with a 4 year old not wanting to eat! grrr) is .andSelf(). It will allow to make a call to get track_options and 1 or 2 of its children like so: $(".track_options).find("span:not(.track_options_addtoplaylist)").andSelf();