jQuery監聽器不包括兒童

我有一個dd項目列表。每個dd項目都有一個監聽器（見下文），所以如果點擊它，我可以重建頁面並更改一些內容。這些dd項目中的每個項目也都有一個複選框，但我希望將其從該監聽器中排除（因此可以由另一個監聽器接收）。jQuery監聽器不包括兒童

的問題是發生是每當我點擊任何地方的DD它將應用DD聽衆，甚至如果我點擊複選框的複選框監聽器。有沒有一種方法可以區分出在dd中設置div並單獨應用偵聽器時點擊了哪些內容？

示例HTML代碼：

<dl> 
    <dd class="class1 class2 class3">Some text and stuff 
    <input type="checkbox" class="class1 checkBox"> 
    </dd> 
</dl>

示例jQuery代碼：

$("class1.checkbox").live("click", function() { 
    //Do some other, completely different, cool stuff 
    //console.log($(this).parent().attr("id")); 
    console.log("test"); 
}); 

$("dd.class1.class2").live("click", function() { 
    //Do some cool stuff 
});

來源

2011-08-19 tgrosinger

$(":checkbox").live("click", function(e) { 
     e.stopPropagation(); 
    //Do some other, completely different, cool stuff 
    //console.log($(this).parent().attr("id")); 
    alert("test"); 
}); 

$("dd.class1.class2").live("click", function (e) { 
    e.stopPropagation(); 
    //Do some cool stuff 
    alert("test2"); 
});

http://jsfiddle.net/PsaHQ/4/

來源

2011-08-19 21:19:19 Rafay

工作完美，謝謝！ – tgrosinger

很高興幫助！ – Rafay

你需要停止事件冒泡。

$(".class1:checkbox").click(function(e) { 
    alert('clicked checkbox'); 
    e.stopPropagation(); 
}); 

$("dd.class1.class2").click(function() { 
    alert('clicked dd'); 
});

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

「冒泡」的概念是一樣，如果你有一個click事件的子元素，你不希望它觸發父的單擊事件。您可以使用event.stopPropagation()。

event.stopPropagation()基本上說只應用這個點擊事件到這個兒童節點，並不告訴父容器什麼，因爲我不想讓他們反應。

事件捕獲：

   | | 
---------------| |----------------- 
| element1  | |    | 
| -----------| |-----------  | 
| |element2 \/  |  | 
| -------------------------  | 
|  Event CAPTURING   | 
-----------------------------------

事件冒泡：

   /\ 
---------------| |----------------- 
| element1  | |    | 
| -----------| |-----------  | 
| |element2 | |   |  | 
| -------------------------  | 
|  Event BUBBLING   | 
-----------------------------------

如果您正在使用live()或delegate()你需要return false;，雖然它可能無法正常工作。閱讀下面的報價。

每JQuery docs：

由於.live（）方法處理事件一旦他們傳播到文件的頂部，它是不可能停止的現場活動的傳播。同樣，由.delegate（）處理的事件將傳播到它們被委派的元素;綁定在上的事件處理程序在調用委託事件處理程序之前，DOM樹下面的任何元素都已執行。因此，這些處理程序可能會阻止調用event.stopPropagation（）或返回false的被委派處理程序觸發。

一個很好的資源：http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/

來源

2011-08-19 21:17:35 AlienWebguy

我使用.live（）的唯一原因是因爲HTML是所有動態事實後生成。任何其他選項呢？只是使用.click以前不工作。 – tgrosinger

停止使用'live（）'。改用'delegate（）'。它可能會或可能不會阻止傳播，具體取決於您的應用程序以及綁定事件的位置。 – AlienWebguy

好吧，你有一大堆的加入了這裏一個大一個小問題。

你的第一個選擇器有2個問題。看看下面的更新選擇（並注意大小寫）：

$(".class1.checkBox").live("click", function() { 
    //Do some other, completely different, cool stuff 
    console.log("test"); 
    return false; //added. 
});

如果你想從冒泡到下一個jQuery的監聽器停止的情況下，就返回false。

來源

2011-08-19 21:19:24

只需綁定click事件的DD和檢查目標委託適當

$("dd.class1.class2").live("click", function (event) { 
     if($(event.target).is(":checkbox")) 
     { 
      console.log("put checkbox func here"); 
     }else{ 
      console.log("put div func here"); 
     } 
    });

工作實例： http://jsfiddle.net/QWLpd/1/

來源

2011-08-19 21:23:28

jQuery監聽器不包括兒童

回答

相關問題