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>

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

StackOverflow还是新手，所以请随意提出您认为有益的任何问题。

感谢大家，即使指针朝着正确的方向！

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

Answer 1

您可以为该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/

干杯！

Answer 2

你的任务有点令人困惑，但我会尝试彻底分解实现目标的众多方法中的一小部分。

第一

如果您尝试为不是由特定孩子触发的父Div创建点击，那么您可以简单地使用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(); });

第二

您可能不希望在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链接：

.live()
.on()
.click()
.find()
.filter()
.stopPropagation()
jQuery Selectors

其他可能感兴趣的东西（我会展示一些例子，除了我必须处理一个不想吃饭的4岁孩子！grrr）是.andSelf()。它可以调用track_options和1或2个孩子，如下所示：$(".track_options).find("span:not(.track_options_addtoplaylist)").andSelf();

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

2 个答案: