2014-02-07 88 views
0

我使用jQuery爲li元素創建了單擊事件。這個事件由於某種原因被解僱了兩次,任何人都可以發現我的錯誤在哪裏?jQuery li點擊事件觸發兩次

HTML:

<ul class="menu"> 
    @foreach (var group in Model) 
    { 
     <li class="group">@group.GroupDesc</li> 
    } 
</ul> 

Java腳本的:

$('ul.menu li').click(function (e) { 
    var li = this; 
    alert(li.innerHTML); 
}); 

CSS:

.group 
{ 
    margin:4px; 
    padding-top:60px; 
    vertical-align:middle; 
    text-align:center; 
    display:inline-block; 
    width:150px; 
    height:100px; 
    color:White; 
    background-color:#00b5fa; 
    font-weight:bold; 
    box-shadow: 10px 10px 9px rgba(0, 0, 0, 0.22); 
    border:3px solid #059ae4; 
} 
+0

是它與同級別其他UL裏面? –

+0

不是它@Pranav C Balan –

回答

1

我認爲你的事件綁定了兩次,所以試試在綁定新事件之前解除先前綁定的eventHandler。

$('ul.menu li').unbind("click"); 

$('ul.menu li').click(function (e) { 
    var li = this; 
    alert(li.innerHTML); 
}); 
+0

事件綁定了兩次,我只是將代碼移動到了不同的位置,現在只能觸發一次,我不必調用unbind。謝謝! –

0

嘗試警報後加入這個(L i.innerHTML);

e.stopPropagation(); 
e.preventDefault(); 
+0

只需添加更多關於'stopPropagation'的信息:它將停止點擊事件從冒泡到父元素(當你有多個包含其他ul的ul時非常有用。對於'preventDefault',它阻止控件使用它的默認行爲。例如,一個空href =「」'的錨會在'click()'方法中沒有'$(this).preventDefault()'的情況下刷新頁面。 – RPDeshaies

1
$('ul.menu li').click(function (e) { 
    var li = this; 
    alert(li.innerHTML); 
    return false ; // e.preventDefault(); 
}); 

$("ul.menu li").off().on("click", function(e) { 
     var li = this; 
     alert(li.innerHTML);  
    });