jQuery .click() 事件停止工作答案

【问题标题】：jQuery's .click() event stopped workingjQuery .click() 事件停止工作
【发布时间】：2014-11-06 09:27:47
【问题描述】：

我有一个表格，其中每一行的第一列包含几个图标，每个图标都在一个 a 元素内：

<a title="aaa@aaa.es" class="delete" href="#" data-toggle="modal" data-target="#dialogDeleteUser">
    <img alt="delete" src="/recursos/imagenes/iconPapelera.png">
</a>

我有一个 jQuery 函数，当点击该链接时应该触发：

$(document).ready(function(){
    $("a.delete").click(function() {
        var userEmail = $(this).attr("title");
        loadUserDelete(userEmail);
    });

事实上，它工作了一段时间，直到我开始使用 TableSorter 使用 Pager 小部件并通过 Ajax 加载表格内容。

表格加载得很好，但由于某种原因，该类在该函数中无法识别，我不知道为什么。

【问题讨论】：

输入错误意外结束..你确定你已经关闭});
请确保您关闭了文档准备功能

标签： javascript jquery tablesorter

【解决方案1】：

添加新内容之后您的代码连接事件运行不会神奇地知道重新运行该代码以在新元素上设置处理程序。您可以改用委托处理：

$("selector for the container of these").on("click", "a.delete", function() {
    var userEmail = $(this).attr("title");
    loadUserDelete(userEmail);
});

现在，click 已与所有这些链接所在的容器挂钩。如果在冒泡时单击通过a.delete 元素传递到容器，jQuery 将调用您的处理程序。

【讨论】：

【解决方案2】：

如果您像这样注册一个直接事件侦听器，则在加载它所针对的内容之前，加载的元素将不会绑定到处理程序。您可以通过使用委托事件来克服这个问题，您可以将侦听器绑定到注册事件处理程序时已经存在的父元素：

$('#parent').on('click', 'a.delete', function(){
...
}):

参考jQuery's documentation for on()

【讨论】：

【解决方案3】：

在创建对象之前，代码可能已经通过了您的函数。尝试将其附加到父级。

$(document).on("click","a.delete",function() {
        var userEmail = $(this).attr("title");
        loadUserDelete(userEmail);
    });

【讨论】：

【解决方案4】：

你应该像这样在父控件上添加点击事件：

$("#parentControl").on("click", "a.delete", function() {
    var userEmail = $(this).attr("title");
    loadUserDelete(userEmail);
});

【讨论】：

【解决方案5】：

输入错误意外结束..你确定你已经关闭$(document).ready函数

   $(document).ready(function(){
        $("a.delete").click(function() {
            var userEmail = $(this).attr("title");
            loadUserDelete(userEmail);
        });
    });

【讨论】：

没听懂。虽然这可能只是一个复制粘贴错误，但在他的代码中并没有真正发生（会引发错误）+1 给你发现它:)

【解决方案6】：

我也面临同样的情况，但在经历了基础知识后意识到“this”的上下文总是在变化。所以如果你想使用“this”，首先将它存储在一个变量中，然后将该变量用作选择器，而不是在选择器中使用“this”

var that = $(this);

that.click(function() {
  ...
});

【讨论】：