.append后运行函数
.append后运行函数
提问于 2015-03-30 18:34:09
我有以下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()实现相同的功能。
提前感谢！
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-03-30 18:37:11
应该将函数绑定到父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>
Stack Overflow用户
发布于 2015-03-30 18:40:10
对未来的元素事件处理程序使用.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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29353625
复制相关文章
相似问题
腾讯云开发者
