jQuery的.click（）函數的特定屬性，返回多個元素

我有一個問題，jQuery和.click（）函數，當點擊一個<li data-link-url="...">元素，共享數據鏈接url屬性。jQuery的.click（）函數的特定屬性，返回多個元素

這是我的HTML結構：

<nav class="fullListHover"> 
    <ul> 
    <li class="oneHub"> 
     <a href="... /suppliers/technology.html"></a> 
     <ul> 
     <li data-link-url="... /templateA.html"> 
      <ul> 
      <li data-link-url="... /templateB.html"></li> 
      </ul> 
     </li> 
     </ul> 
    </li> 
    </ul>  
</nav>

，這是我的jQuery click（）函數：

<script type="text/javascript"> 
    $("[data-link-url]").click(function(){ 
     window.location.href=$(this).attr("data-link-url") 
    }); 
</script>

當我在李標籤點擊與」 ... /templateB.html「我被重定向到」.../templateA.html「。所以我調試了整個事情並記錄了$（this）變量。當我點擊「.../templateB.html」輸出是：

.../templateB.html 
.../templateA.html

好像中，。點擊（）函數運行第二次。

如何才能選擇模板B或防止點擊功能第二次運行？

P.S .:我希望我的問題是可以理解的。英語不是我的主要語言。

來源

2016-11-14 Daniel Stecura

不是一個確切的重複，但也有可能別人：http://stackoverflow.com/questions/387736/how-to-stop-event-propagation- with-inline-onclick-attribute –

單擊事件泡泡。 –

我一定找過錯誤的關鍵詞，因爲我沒有找到適合我的問題的答案。謝謝你！ –

你的問題是因爲你已經嵌套元素與data-link-url屬性，因此當事件冒起DOM時，層次結構中的每個元素都會調用一次點擊處理程序。爲了解決這個問題，請致電stopPropagation()在事件處理程序：

$("[data-link-url]").click(function(e) { 
    e.stopPropagation(); 
    window.location.href = $(this).data('link-url'); 
});

來源

2016-11-14 17:19:40

'stopPropagation'示例小提琴 - 刪除線以查看事件泡泡：https：//jsfiddle.net/7wto6hrh/ –

只是出於好奇：爲什麼使用.data（）而不是.attr（）？是否因爲.attr（）的IE問題？ –

在大多數情況下，它更快，因爲它使用jQuery的內部緩存而不是訪問DOM。 –

jQuery的.click（）函數的特定屬性，返回多個元素

回答

相關問題