.append 后运行函数答案

【问题标题】：Run function after .append.append 后运行函数
【发布时间】：2015-06-03 21:44:55
【问题描述】：

我有以下 html 代码：

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

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

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

我设法创建了以下小提琴：http://jsfiddle.net/ucant5uy/ 在这个小提琴中，你可以看到第一个函数（#a 被点击）运行完美，但第二个函数（#b 被点击）没有运行，因为页面加载时 div #b 不存在。

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

提前致谢！

【问题讨论】：

这样的问题已经被问了一千遍了。您可以在 stackoverflow 上轻松找到答案。该方法通常称为“事件委托”。
Event binding on dynamically created elements? 的可能副本
这样一个有这么多前辈的问题，怎么会得到这么多的赞？！！！只是好奇

标签： javascript jquery html css

【解决方案1】：

你应该将函数绑定到DOM中存在并且将存在的父div（并且它是main），否则你可以只将函数分配给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>

【讨论】：

谢谢，工作顺利。我会在 11 分钟内“检查”你的答案（因为 stackoverflow 不会让我现在“检查”它）

【解决方案2】：

将 .on() 用于未来元素事件处理程序

$("div").on('click','div#b',function() {

        $(this).parent().append('<div id="a"></div>');
        $(this).remove();
    })

演示：

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

div {
    width:200px;
    height:200px;
    background:red;
}

#a, #b {
    width:100px;
    height:100px;
}

#a {
    background-color:green;
}

#b {
    background-color:blue;
}

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

【讨论】：