0

我有以下代码：

$('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_”开头）。第二个警报显示为空。尽管它具有正确的类，但我无法再次单击同一个按钮。正常吗？我该怎么办 ？

4

2 回答 2

6

事件处理程序（委托事件除外 - 稍后会详细介绍）直接绑定到元素。如果您替换该元素（这正是您在使用该.replaceWith()函数时所做的），那么您将删除该事件处理程序以及该元素；你不会让你的事件绑定到新元素。

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

如果您使用的是 jQuery 1.7+，则可以使用该.on()函数来执行此操作：

$(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+，您可以使用该函数获得相同的.delegate()功能 - 语法实际上是相同的，您只需切换'click'和'div[class^=locked_]'参数。

于 2012-08-07T14:37:06.527 回答
3

replaceWith从 DOM 中移除一个元素并将其替换为另一个元素。您newThis正在引用刚刚从 DOM 中删除的旧元素。

于 2012-08-07T14:34:43.807 回答