我如何得到新的html内容和它的ID工作?

Question

在replaceWith或新的HTML代码中检测和使用id的问题

嗨，我在使用replaceWith时遇到了问题。当我点击下面的div并替换HTML。我不能在新的div中使用id。我甚至尝试用HTML代替replaceWith，但我仍然无法。

<div id="action"></div>
<script>
$("#action").click(function(){
var foo = $(this).attr('id');
//$("#"+foo).html("<div id="next">do this</div>");
$("#"+foo).replaceWith("<div id="next">do this</div>");
});
$("#next").click(function(){
var bar = $(this).attr('id');
alert(bar);
});
</script>

Answer 1

您的示例代码有error syntax，因此我将其分为两种可能的情况:

1. 依次替换HTML然后listen事件点击

$("#action").click(function(){
var foo = $(this).attr('id');
$("#"+foo).replaceWith("<div id='next'>do this</div>");

$("#next").click(function(){
var bar = $(this).attr('id');
alert(bar);
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="action" >action </div>

2. 如果您单独打开listen事件，则应使用$(document).on("click","#next", function(){

$("#action").click(function(){
var foo = $(this).attr('id');
$("#"+foo).replaceWith("<div id='next'>do this</div>");
});
$(document).on("click","#next", function(){
var bar = $(this).attr('id');
alert(bar);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="action" >action </div>