javascript - 使用jQuery点击处理 anchor onClick()

Question

我在 for 循环中有一组动态生成的 anchor 标记，如下所示:

<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 值正确。

Answer 1

第一次单击链接时，openSolution 函数被执行。该函数将 click 事件处理程序绑定(bind)到链接，但不会执行它。第二次单击链接时，将执行 click 事件处理程序。

您所做的事情似乎首先违背了使用 jQuery 的初衷。为什么不首先将点击事件绑定(bind)到元素:

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

这样您就不需要在元素上使用 onClick 属性。

看起来您还有多个元素具有相同的 id 值(“solTitle”)，这是无效的。您需要找到其他一些共同特征(class 通常是一个不错的选择)。如果将所有出现的 id="solTitle" 更改为 class="solTitle"，则可以使用类选择器:

$(".solTitle a")

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