Question

我将带有子锚标记的列表项添加到无序列表，具体取决于从AJAX请求返回的内容。它们存在于下拉列表中，并且需要在单击每个特定锚点时返回的唯一文本值。 x是在下面的脚本中为每个项创建的唯一值。

var appendDropDwn = function appendDropDwn(x) {
        console.log("Append Drop Down");
        var html = "<li><a href='#' class='x-list' id="+ x + ">" + x + "</a></li>"
        console.log(html);

$("#x-dropdown-ul").append(html);
}

然后我使用上面附加函数中的类

创建一个事件监听器

    $(".x-list").click(function (e) {
        var y = $(this).text();
        alert(y);

    });

问题是，当单击锚元素时，脚本将针对所有锚标记运行。换句话说，如果它们是在第一个脚本中附加到UL的100个列表项/锚标签，则第二个脚本运行100次但仅警告实际单击的那个的.text（）。它会提醒相同的文本值100次。

Answer 1

听起来好像多次附加了点击功能。如果它附加到所有$(".x-list")元素，则第二次运行也会附加到先前创建的元素。

您可以将点击直接附加到创建的对象，或者您可以将该函数附加到父ul一次（在DOM准备就绪，在Ajax数据处理之外，因此它只附加一次！）并使用event.Target确定点击了哪个标签

 $("#x-dropdown-ul").click(function (e) {
        var y = $(e.target).text();
        alert(y);
    });

（如果需要，你可以进一步过滤.x-list，但由于li似乎只包含标签，这就足够了吗？）

Answer 2

我会修改click事件，以便更好地处理动态创建的.x列表项。

$("#x-dropdown-ul").on('click', '.x-list', function (e) {
    var y = $(this).text();
    alert(y);
});

请参阅此帖子了解更多信息：

Event binding on dynamically created elements?

Jquery - 返回文本单击“无序列表内部”的特定锚点的值

2 个答案: