使用jQuery單擊處理錨的onClick（）

我有一組動態生成的錨標記的for循環如下：使用jQuery單擊處理錨的onClick（）

<div id = "solTitle"> <a href = "#" id = "' + tagId + '" onClick = "openSolution();"> ' + solTitle + '</a></div> <br>';

一旦代碼被執行的HTML輸出的情況下的一個會看如：

<div id = "solTitle"> <a href = "#" id = "solution0" onClick = "openSolution();">Solution0 </a></div> <br> 

<div id = "solTitle"> <a href = "#" id = "solution1" onClick = "openSolution();">Solution1 </a></div> <br>

現在我想單擊上述鏈接時顯示不同的文本。 openSolution（）看起來是這樣的：

function openSolution() { 
    alert('here'); 
    $('#solTitle a').click(function(evt) { 
     evt.preventDefault(); 
     alert('here in'); 
     var divId = 'summary' + $(this).attr('id'); 

     document.getElementById(divId).className = ''; 

    }); 
}

當我執行它，然後單擊任一鏈接，流進來的jQuery的點擊處理程序中亙古不變的。我通過上面的警告檢查了它。它只顯示警報 - '在這裏'而不是警報 - '在這裏'。第二次點擊鏈接時，一切正常，divId的值正確。

來源

2012-01-18 crazy_coder

當您第一次點擊該鏈接時，執行openSolution功能。該函數將鏈接綁定到事件處理函數，但不會執行它。第二次單擊鏈接時，將執行click事件處理程序。

你在做什麼似乎有點挫敗首先使用jQuery的點。爲什麼不click事件只是綁定到擺在首位的要素：

$(document).ready(function() { 
    $("#solTitle a").click(function() { 
     //Do stuff when clicked 
    }); 
});

這樣，你不需要在你的元素onClick屬性。

它也看起來像你有多個元素具有相同的id值（「solTitle」），這是無效的。你需要找到一些其他的共同特徵（class通常是一個不錯的選擇）。如果更改id="solTitle"所有出現class="solTitle"，然後你可以使用一個類選擇：

$(".solTitle a")

由於重複id值是無效的，該代碼將不會面臨同樣的id的多個副本時，達到預期效果。最容易發生的是使用該元素的第一次出現，並且所有其他元素都被忽略。

來源

2012-01-18 10:00:58

，因爲#soltitle正在重複將無效 – 2012-01-18 10:07:02

@ToniMichelCaubet - 我在最後一段提到過。我想這可能會更清楚一點，謝謝。 – 2012-01-18 10:10:11

你不能有多個時間元素的相同ID。它意味着獨一無二。

使用的一類，讓你的獨特的ID：

<div class="solTitle" id="solTitle1"> <a href = "#" id = "solution0" onClick = "openSolution();">Solution0 </a></div>

，並使用類選擇：

$('.solTitle a').click(function(evt) { 

    evt.preventDefault(); 
    alert('here in'); 
    var divId = 'summary' + this.id.substring(0, this.id.length-1); 

    document.getElementById(divId).className = ''; 

});

來源

2012-01-18 10:00:52

感謝所有。它與您的建議合作。 :) – 2012-01-19 03:41:30

您分配一個函數內部的onclick事件。這意味着一旦函數執行一次，第二個onclick事件也被分配給該元素。

要麼分配函數onclick要麼使用jquery click()。

沒有必要同時擁有

來源

2012-01-18 10:00:52 clem

我改變了幾件事情：

刪除的onclick ATTR和綁定點擊事件的document.ready
改變solTitle是一個ID爲類中：ID不能重複

來源

2012-01-18 10:05:56

的HTML應該是這樣的：

<div class="solTitle"> <a href="#" id="solution0">Solution0 </a></div> 
<div class="solTitle"> <a href="#" id="solution1">Solution1 </a></div> 

<div id="summary_solution0" style="display:none" class="summary">Summary solution0</div> 
<div id="summary_solution1" style="display:none" class="summary">Summary solution1</div>

和JavaScript：

$(document).ready(function(){ 
    $(".solTitle a").live('click',function(e){ 
     var contentId = "summary_" + $(this).attr('id'); 
     $(".summary").hide(); 
     $("#" + contentId).show(); 
    }); 
});

參見示例：http://jsfiddle.net/kmendes/4G9UF/

來源

2012-01-18 10:09:16

請注意，'live（）'在jQuery 1.7中被棄用，並在1.9中被刪除。附加事件監聽器的推薦方法是on（）'。 ref：http://api.jquery.com/live/ – 2013-02-27 18:27:35

讓我們的錨標記的onclick事件，調用JavaScript函數。

<a href="#" onClick="showDiv(1);">1</a>

現在在JavaScript編寫下面的代碼

function showDiv(pageid) 
{ 
    alert(pageid); 
}

這將顯示你的「1」的警報....

來源

2013-10-10 14:32:30

這實際上並沒有回答這個問題。問題是如何使用jQuery來處理點擊。你的答案只適用於香草JavaScript而不是jQuery。 – jacurtis 2016-10-22 18:51:26

使用jQuery單擊處理錨的onClick（）

回答

相關問題