Question

这可能很容易，但我无法弄清楚......

我正在尝试动态构建模态通知窗口，其结构为：

<!-- the overlay to disable the screen interaction -->
<div id="modalWrapper"></div>

<!-- the actual window where I put the contents in dynamically -->
<div id="modalWindow"></div>

我使用JQuery构建的结构是：

<h1>Error</h1><h5>test</h5><ul class="buttons"><li class="left"><a class="button red small">Close</a></li></ul>

我也动态地附加了一个事件处理程序：

a.bind('click', function() {
    // hide wrapper and modal
    $('#modalWindow').hide();
    $('#modalWrapper').hide();
    callback();
});

回调函数作为对构建模态窗口的函数的引用传递。

当我调用“显示”功能时 - 它会构建窗口并显示它，但它只适用于ONCE。对它的任何连续调用都失败为

$('#modalWindow').empty();

无法删除绑定了它们的事件的元素（即节点）。

我试过了：

$('#modalWindow').empty();
$('#modalWindow').remove();
$('#modalWindow a').each(function(index, item) { $(item).unbind('click');});
$('#modalWindow a').each(function(index, item) { $(item).remove();});

并且所有这些都失败并显示相同的错误消息：

TypeError: handleObj is undefined
()jquery-1.7.2.js (line 3057)
()jquery-1.7.2.js (line 6524)
()jquery....min.js (line 9)
()jquery-1.7.2.js (line 5906)
()xxxxxxxxxxx.js (line 392)
()xxxxxxxxxxx.js (line 282)
[Break On This Error]   

if ( ( mappedTypes || origType === handleObj.origType ) && jquery-1.7.2.js (line 3057

有人可以解释如何清空#modalWindow以便我可以在下一次通知时再次填充它吗？

我用这个来复制这个问题：

var x = $('<a/>').html('clickme').attr('id','some_id').bind('click',function() {$(this).remove();});
$('body').append(x);

但是请注意，上面的单行错误输出相同的消息，但我的应用程序中的实际执行流程是不同的。我正在构建所有HTML并绑定一个“隐藏”模态元素的事件。然后在下一次迭代中，我试图“清空”模态容器并在其中“插入”新项目，这就是它出错的地方 - 所以我不会删除包含当前正在执行的处理程序的项目。我试图在下一次迭代中删除它。

提前致谢。

另一个更新 - 仅供参考 似乎JQuery的事件调度程序或其周围的代码可能存在错误。

Object.prototype.someFunctionName = function(param) {
   alert('test');
}
var x = $('<a/>').html('clickme').attr('id','some_id').bind('click',function() {$(this).remove();});
$('body').append(x);

每次在任何元素上触发“click”时，

都会导致someFunctionName被执行，并且参数不匹配会导致JQuery出现阻塞和错误。

如果我们像这样定义someFunctionName：

Object.prototype.someFunctionName = function() {
   alert('test');
}
var x = $('<a/>').html('clickme').attr('id','some_id').bind('click',function() {$(this).remove();});
$('body').append(x);

它有效，但每次仍然执行 - 这是错误的...... 我将在JQuery的网站上发布 - 谢谢你们。

工作的： http://jsfiddle.net/tinnerdxp/AU4pm/

不起作用： http://jsfiddle.net/tinnerdxp/Pvax2/

tinnerdxp

Answer 1

tinnerdxp回答：

谢谢大家，最后是我的代码。我像这样扩展了Object.prototype：

Object.prototype.isSet = function(property) {
    if (!(property in this)) {
        return false;
    } else {
        return true;
    }
}


Object.prototype.isArray = function() {
    if (this.constructor.toString().indexOf('Array') == -1) {
        return false;
    } else {
        return true;
    }
}

并且第一个扩展实际上正在破坏它。这有点奇怪：

JQuery没有在任何地方使用.isSet - 所以我没有覆盖任何核心职能
将isSet重命名为像amIset一样愚蠢的东西 - 仍然没有修复它
删除isSet - 修复它虽然我仍然有.isArray（） - 并且它可以正常使用那个。

我上面提到的复制代码 - 当我执行我的库（和扩展程序）时确实不起作用 - 所以在这里发布它是错误的。

一般来说：

感谢Blazemonger提出建议，让我得出一个决议
安东尼 - 这也是一个非常好的指针 - 因为我最初怀疑范围问题。

谢谢你们。

JQuery无法删除带有附加事件处理程序的元素

1 个答案:

tinnerdxp回答：