javascript - 在 .append 之后运行函数

Question

我有以下 html 代码:

<div>
   <div id="a"></div>
</div>

当点击 id="a"的 div 时，我想用以下 div 替换这个 div:

<div id="b"></div>

我设法创建了以下 fiddle :http://jsfiddle.net/ucant5uy/ 在此 fiddle 中，您可以看到第一个函数(单击#a)运行完美，但第二个函数(单击#b)未运行，因为页面加载时div #b不存在。

然后我决定将第二个函数放在第一个函数中: http://jsfiddle.net/ucant5uy/2/ 。正如您所看到的，您可以单击 #a 一次，然后单击 #b 一次，然后代码就会停止工作。我希望能够根据需要多次单击 #a 和 #b。我知道你可以通过一些简单的 CSS 技巧来实现这一点(将两个 div 添加到 HTML 并使用 display:none;)，但我想知道是否可以使用 .append() 来实现相同的目标。

提前致谢!

Answer 1

你应该将函数绑定(bind)到父div(它是main)，它存在于DOM中并且将存在，否则你只能将函数分配给已经存在的元素在 DOM 中。

$(document).ready(function() {
        $('#main').on("click","#a",function() {
            $(this).parent().append('<div id="b"></div>');
            $(this).remove();
        })
        
        $('#main').on("click","#b",function() {
            $(this).parent().append('<div id="a"></div>');
            $(this).remove();
        })
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
    <div id="a"></div>
</div>