1

我有以下代码：

$("#another").click(function() {
    $('#another').replaceWith('<a id="another" class="btn btn-primary btn-mini disabled"><i class="icon-refresh icon-white"></i>&nbsp;Loading...</a>');
    $.get('another.php', { 'cycle' : i }, function(data) {
        $('tbody').append(data);
        $("#another").replaceWith('<a id="another" class="btn btn-primary btn-mini"><i class="icon-plus icon-white"></i>&nbsp;Load another cycle</a>');
    });
    i++;
});

当我单击具有另一个 id 的元素时，它会加载一次。一按后就不能再用了。

4

3 回答 3

2

您正在用没有事件侦听器的节​​点替换节点。

基本上在你点击之前

[#another]
    ^
    |
[clickListener]

然后构建另一个按钮 ( <a id="another" class="btn btn-primary btn-mini disabled"><i class="icon-refresh icon-white"></i>&nbsp;Loading...</a>)

[#another]     [#another](2)
    ^
    |
[clickListener]

然后我们在布局中用第二个替换第一个：

[#another]               [#another](2)
    ^
    |
[clickListener]

哦，等等，我的模型没有任何变化。那是因为点击监听器链接到第一个对象（不再可见），而可见的对象仍然存在。

所以在代码方面，这是什么意思？它只是意味着您需要将事件侦听器重新附加到那里。这就是我的做法

var onClick=function(){
    $('#another').replaceWith('<a id="another" class="btn btn-primary btn-mini disabled"><i class="icon-refresh icon-white"></i>&nbsp;Loading...</a>')
    .click(onClick); // <--- this is the important line!

    $.get('another.php', { 'cycle' : i }, function(data) {
        $('tbody').append(data);
        $("#another").replaceWith('<a id="another" class="btn btn-primary btn-mini"><i class="icon-plus icon-white"></i>&nbsp;Load another cycle</a>');
    });
    i++;
}

$("#another").click(onClick);
于 2012-04-10T01:45:03.687 回答
1

如果将元素替换为另一个元素，则所有侦听器都将被删除。为避免这种情况，您可以再次将侦听器添加到新元素

$('#another').bind('click', function() {
  //do something
});

或将代码移动到函数并onclick为元素添加属性。

onclick="my_function();"

在你当前的 javascript 中它会是

$('#another').replaceWith('<a id="another" class="btn btn-primary btn-mini disabled" onclick="my_function();"><i class="icon-refresh icon-white"></i>&nbsp;Loading...</a>');
于 2012-04-10T01:40:32.843 回答
1

最好只保留相同的按钮，使用相同的事件处理程序。只需动态更改文本和增量i。试试这个：

// Execute in a closure to isolate all the local variables
// Optional, but I like doing this when counter variables are involved
(function() {
    var button = $("#another");
    var a = button.find("a");
    var i = 1;

    button.click(function() {
        // Replace the inner html, not the entire element
        a.html("<i class='icon-refresh icon-white'</i>&nbsp;Loading...");
        $.get("another.php", {
            cycle: i
        }, function(data) {
            $("tbody").append(data);
            a.html("<i class='icon-plus icon-white'></i>&nbsp;Load another cycle");            
            i++;
        });
    });
})();

这种方法的好处是减少了 DOM 操作，没有内联 JavaScript，也没有全局函数或变量。如果外部标记相同，确实没有理由每次都销毁按钮并重新创建它。

于 2012-04-10T01:50:36.573 回答