使用jQuery click处理锚点的onClick()事件

Question

我有一组在 for 循环中动态生成的锚点标签，如下所示：

<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点击处理程序。我通过上面使用的警报进行了检查。它只显示警报 -“here”，而不是警报 - “here in”。 第二次点击链接时，一切都能够完美地工作，并且divId的值是正确的。

- crazy_coder

Answer 1

第一次点击链接时，将执行openSolution函数。该函数绑定了click事件处理程序到链接上，但不会立即执行它。第二次点击链接时，click事件处理程序将被执行。

你所做的似乎有点违背使用jQuery的初衷。为什么不一开始就将点击事件绑定到元素上呢：

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

这种方法不需要在元素上添加onClick属性。

同时，您似乎有多个具有相同id值（“solTitle”）的元素，这是无效的。您需要找到其他共同特征（使用class通常是一个好选择）。如果您将所有出现id="solTitle"的地方改为class="solTitle"，则可以使用类选择器：

$(".solTitle a")

由于重复的id值是无效的，当面对多个相同id的副本时，代码将无法按预期工作。通常发生的情况是使用具有该id的元素的第一次出现，并忽略所有其他出现。

- James Allardice

---

因为 #soltitle 被重复使用了，所以那是无效的。 - Toni Michel Caubet

@ToniMichelCaubet - 我在最后一段提到了这一点。不过我想可能需要更清晰明了，谢谢。 - James Allardice

这个答案现在已经过时了。jQuery今天使用.on('click', function() {而不是.click(function() {。 - Enriqe

Answer 2

假设我们有一个带有onclick事件的锚标签，它调用了一个Javascript函数。

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

现在在 JavaScript 中编写以下代码：

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

这将向您显示一个值为“1”的警报...

- Tapan kumar

---

这并没有真正回答问题。问题是如何使用jQuery来处理点击事件。你的答案只适用于原生JavaScript而不是jQuery。 - jacurtis

是的，但这让我思考了。在我的情况下更容易些。 - Steve Greene

onclick事件中的c是小写，而不是大写。 - Merr Leader

Answer 3

HTML应该如下所示：

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/

- Karl Mendes

---

请注意，live()在jQuery 1.7中已被弃用，在1.9中已被移除。推荐使用on()方法来绑定事件监听器。参考文献：http://api.jquery.com/live/ - Paul Smith

Answer 4

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

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



$(document).ready(function(){
    $('.solTitle a').click(function(e) {
        e.preventDefault();
        alert('here in');
         var divId = 'summary' +$(this).attr('id');

        document.getElementById(divId).className = ''; /* or $('#'+divid).removeAttr('class'); */

    });
 });

我做了几个修改：

1. 删除onclick属性，并在document.ready内部绑定click事件
2. 将solTitle从ID更改为CLASS：ID不能重复

- Toni Michel Caubet

Answer 5

元素的ID不能重复，它应该是唯一的。

使用类(class)并使您的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 = ''; 

});

- Didier Ghys

Answer 6

你正在函数内部分配一个 onclick 事件。 这意味着一旦函数执行了一次，第二个 onclick 事件也会被分配给该元素。

要么分配函数 onclick，要么使用 jQuery 的 click()。

没有必要两者都有。

- clem