javascript - JQuery onclick slideDown 元素和更改 id 只工作一次

Question

我试图在每次单击按钮时显示一个新元素，这就是我想出的:

$(document).ready(function(e) {

    $('#addNew').click(function() {
        $('#D2').slideDown();
        this.id = '#addNew2';   
    });

    $('#addNew2').click(function() {
        $('#D3').slideDown();
        this.id = '#addNew3';   
    });

    $('#addNew3').click(function() {
        $('#D4').slideDown();
        this.id = '#addNew4';   
    });

});

这里还有一个 fiddle http://jsfiddle.net/QZF4S/

它第一次工作正常，但 id 发生了变化，但之后就不起作用了？

在此之前，我尝试使用 if else 语句来检查该元素是否为显示 block ，以及它是否在单击时打开了下一个元素。但这有同样的问题，只能工作一次

如有任何帮助，我们将不胜感激。

谢谢，卢克

Answer 1

问题在于您在何处绑定(bind)您的函数。文档在加载时不包含次要 ID，因此 #addNew2 点击功能永远不会附加到链接，因为链接的 ID 在第一次点击事件中发生了变化。

如果您知道它将包含一定数量的元素，则可以嵌套事件。这是这个案例的更新 fiddle :http://jsfiddle.net/Y6yHu/

如果您希望它是无休止的，并根据用户的需要添加尽可能多的元素，您需要创建一个独立的函数来执行这些操作，然后将此函数附加到您的 addNew 点击事件但保持 ID 不变。在辅助函数中，您可以检测添加元素的数量并根据存在的元素执行操作。