我有一个元素#standardBox
#standardBox.click --> replaces itself with #newBox
#newBox.click --> replaces itself with #standardBox
但是这个最新的#standardBox
没有点击事件监听器。我希望它有一个on click事件监听器及其随后创建的元素。这是一个递归循环,我不知道如何解决。
我将这个用于带有标准内容的标题,它被中间/新内容替换,这又是回到标准内容......
感谢。
HTML
<div id="container">
<div id="standardBox"></div>
</div>
CSS
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
position: relative;
height: 5em;
width: 5em;
background: #C5CAE9;
}
#standardBox {
position: absolute;
top: 20%;
right: 20%;
bottom: 20%;
left: 20%;
background: #ffffff;
cursor: pointer;
}
#newBox {
height: 3em;
width: 3em;
background: #000000;
cursor: pointer;
}
JAVASCRIPT
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$('#standardBox').click(function(){
$('#container').html('<div id="newBox"></div>');
// register event handler for new element created
$('#newBox').click(function(){
$('#container').html('<div id="standardBox"></div>');
// but this #standardBox has no click event listener
});
});
答案 0 :(得分:1)
将处理程序附加到正文,而不是像这样:
$("body").on("click", "#standardBox", function(){
$('#container').html('<div id="newBox"></div>');
})
.on("click", "#newBox", function(){
$('#container').html('<div id="standardBox"></div>');
});
这会导致正文监听来自#standardBox
和#newBox
的事件。请注意,this
变量仍设置为#standardBox
或#newBox
元素。
答案 1 :(得分:0)
使用下面的代码。动态创建的元素不使用“点击”功能激活事件。您需要将处理程序附加到文档(正文)
$(document).on('click','#standardBox',function(){
$('#container').html('<div id="newBox"></div>');
// register event handler for new element created
});
$(document).on('click','#newBox',function(){
$('#container').html('<div id="standardBox"></div>');
// but this #standardBox has no click event listener
});
答案 2 :(得分:0)
为什么要编写这样复杂的代码来执行此操作。因为可以有一个非常简单的代码。
让我们说你的HTML。
<div id="container">
<div id="standardBox"></div>
</div>
现在,要更改内部容器。
$(function(){
$('#container div').click(function(){
$(this).attr("id")=="standardBox"?$(this).attr("id","newBox"):$(this).attr("id","standardBox");
});
});