Question

我正在尝试创建一个简单的容器，用户可以单击下一个按钮继续查看更多内容，然后迭代以继续查看更多内容。我按照以下方式设置了jquery，第一组完美运行，但第二组没有：

$('#button').click(function(){
    $("#simon .1").replaceWith(function(){
        return $("<p class='3'>hello im info1</p>");
    }); 

    $("#button").replaceWith(function(){
        return $("<p id='button1'><a href='#'>button1</a> </p>");
    });
});

$('#button1').click(function(){
    $("#simon .3").replaceWith(function(){
        return $("<p class='3'> hello im info 2</p>");
    });

    $("#button1").replaceWith(function(){
        return $("<p id='button2'><a href='#'>button2</a> </p>");
    });
});

html：

<p class="1"> i am info 0 </p>
<p id="button"><a href="#">button</a> </p>

提前谢谢你！

Answer 1

你需要委托事件，如下：

$(document).on('click', '#button1', function(){
    $("#simon .3").replaceWith(function(){
        return $("<p class='3'> hello im info 2</p>");
    });

jsFiddle here.

详细了解事件委派here。

Answer 2

您需要在此处使用event delegation将click事件附加到新创建的按钮：

$(document).on('click','#button1', function() {
    $("#simon .3").replaceWith(function(){
        return $("<p class='3'> hello im info 2</p>");
    });

    $("#button1").replaceWith(function(){
        return $("<p id='button2'><a href='#'>button2</a> </p>");
    });
});

实际上，我们不应该在这里使用$(document)来进行委派事件处理，因为将它们绑定到非动态的最近父节点（它是按钮的父元素）会更有效。

更改后，Jquery onclick替换div内容不起作用

2 个答案: