1 
<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 还是新手，所以请随时提出您认为有益的任何问题。

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

使用 onclick 事件取消绑定 div 内“a”的 onclick 事件

4

2 回答 2

4

您可以做的是为该 div 内的所有跨度指定一个单击函数，以阻止单击事件传播。我还没有测试过这段代码，但它看起来像这样：

$('#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-10T23:47:27.823 回答
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 的所有孩子都使用 stop 道具，因此您使用.filter()。这个方便的 jQuery 函数将允许您在您选择的 track_options 的内部元素上停止 prop。请参见下面的示例：

//  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 链接：

  1. 。居住（）
  2. 。在（）
  3. 。点击（）
  4. 。寻找（）
  5. 。筛选（）
  6. .stopPropagation()
  7. jQuery 选择器

其他可能感兴趣的东西（我会举个例子，除了我必须和一个不想吃饭的 4 岁孩子打交道！grrr）是.andSelf()。它将允许调用获取 track_options 及其 1 或 2 个子项，如下所示：$(".track_options).find("span:not(.track_options_addtoplaylist)").andSelf();

于 2012-08-11T00:46:03.933 回答