JQuery在.click（）中替换$（this）会导致不可读取的结果吗？

我有以下代码：

$('div[class^=locked_]').click(function() {
        var newThis = $(this) ;
        $(this).load(url + " #" + $(this).attr("id"), function() {
            var loaded = $(this).children("#" + $(this).attr("id")) ;
            alert($(loaded).attr("class")) ; // displays "locked_true"
            $(newThis).replaceWith($(loaded)) ;
            alert($(newThis).html()) ;

        }) ;
    }) ;

---

我不理解我得到的行为：第一个警报显示正确的类（以“locked\开始”）。第二个警报显示null。我无法再次单击同一按钮，尽管它具有正确的类。这正常吗？我该怎么办？

replaceWith

从DOM中删除一个元素并用另一个元素替换它。您的

newThis

引用的是刚从DOM中删除的旧元素。

事件处理程序（委托事件除外，稍后将详细介绍）直接绑定到元素。如果您替换该元素（这正是您在使用

.replaceWith（）

函数时所做的操作），则将该事件处理程序与该元素一起移除；您不会将事件绑定到新元素

如前所述，解决方案是事件委派。一般原则是，在包含动态元素的静态元素上设置事件处理程序，动态元素将处理事件，并负责在事件目标与提供的选择器匹配时执行回调函数

如果您使用的是jQuery 1.7+，则可以使用该函数执行以下操作：

$(document).on('click', 'div[class^=locked_]', function(e) {
    var newThis = $(this) ;
    $(this).load(url + " #" + $(this).attr("id"), function() {
        var loaded = $(this).children("#" + $(this).attr("id")) ;
        alert($(loaded).attr("class")) ; // displays "locked_true"
        $(newThis).replaceWith($(loaded)) ;
        alert($(newThis).html()) ;
    });
});

我在示例中使用了

document

，但理想情况下，您应该使用更具体的静态元素（越接近动态元素越好）

---

如果您没有使用jQuery 1.7+，您可以使用该函数获得相同的功能-语法实际上是相同的，您只需切换

'click'

和

'div[class^=locked\]

参数。

您将

$

包装您的

新对象两次（它已经是jQuery对象），但我想这不应该是问题的最初原因。你的代码应该做什么？您是否需要.load回调中的任何代码？这一切看起来都是多余的。我敢肯定JQ会处理好包装的进一步尝试。我知道，因为我在不知道JQ在做什么的时候做了很多，非常感谢！事实上，我没有正确的JQuery版本可在（）上使用，因此感谢您提供有关版本的详细信息。现在，它可以正常工作了。我可以一遍又一遍地点击。但是，警报（newThis.html（））显示一个空字符串。@user1360941在
之后的代码中对
newThis
的任何引用。replaceWith（）
调用将引用一个不再存在的元素，因此返回空字符串也就不足为奇了。