整个div上的jQuery onClick事件EXCEPT特定span元素

<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>

这是一个隐藏的DOM元素，用于呈现搜索结果页面（AJAX）。在更新并填写有效信息后，我克隆（true）上述元素并将其附加到页面中。问题源于类“track_options”中的元素应该以其他方式行事。我看到StackOverflow上的其他问题通过阻止默认操作完全删除行为（将在本文结尾处链接），但我想要删除从父级继承的onClick事件并添加特定于每个元素的操作。整个div上的jQuery onClick事件EXCEPT特定span元素

还是StackOverflow的新增功能，所以请随时提出您认为有益的任何问题。

谢谢大家，即使是正确的方向指针！

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

来源

2012-08-10 Nicholas Yost

你的追求有点令人困惑，但我会尽力让你完全分解许多方法中的一些来实现你的目标。

首先

如果你想创建不是由特定的孩子，那么你可以简单的使用event.stopPropagation()因为这样引发的母公司事业部点击：

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

您可能不会w蚂蚁阻止道具对所有track_options的孩子，因此你使用.filter()。这个方便的jQuery func可以让你停止精确地选择你选择的track_options的内部元素。见下面的例子：

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

你可以使用jQuery的CSS选择器来与聪明的方式为需要达到每个元素。喜欢的东西：

$(".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(); });

重要jQuery的链接在以前的代码中使用：

别的东西，可能的利益（我想示范例子，除了我必须去处理一个4岁的不想吃！ grrr）是.andSelf()。它将允许拨打电话以获得track_options和其1或2个孩子，如下所示：$(".track_options).find("span:not(.track_options_addtoplaylist)").andSelf();

来源

2012-08-11 00:46:03 SpYk3HH

你可以做的是指定一个点击功能为DIV中所有的跨度，从传播停止click事件。我还没有测试此代码，但它会是这个样子：

$('#build_blankrow').click(function(ev) { 
    // ..... 
}); 
$('#build_blankrow > span').click(function(ev) { 
    ev.stopPropagation() // this ensures that the event won't bubble up to your div 
    // put in your own code here 
});

退房http://api.jquery.com/event.stopPropagation/

干杯！

来源

2012-08-10 23:47:27 Joe

整个div上的jQuery onClick事件EXCEPT特定span元素

回答

相关问题