为什么事件对我通过jQuery推送的HTML不起作用？

Question

请按照以下步骤操作：

• 在下面运行代码段
• 点击click here
• 点击draw按钮
• 单击start again链接
• 单击click here ，看到了吗？ 什么都没发生。

为什么？ 我该如何解决？

 set_container(); $("body").one('click', '#one_to_many', function () { $(this).html('<form action="demo_form.asp">\\ <input type="checkbox" name="graph" value="like" checked> one<br>\\ <input type="checkbox" name="graph" value="comment" checked> two<br>\\ <input type="checkbox" name="graph" value="friend" checked> three<br>\\ <input class="graph_btn" type="button" value="draw">\\ </form>'); }); function set_container() { $(".set_value").html('<div id = "one_to_many" class="draw_graph col-md-8 col-md-offset-2 text-center" style="margin-bottom: 25px;">\\ click here\\ </div>'); } $("body").on('click', '.graph_btn', function (e) { $(this).attr('disabled', 'disabled'); $(this).css({"cursor": "wait", "opacity": ".5"}); $(this).after('<a onclick="set_container();">start again</a>'); }); 

  .draw_graph{ border: 4px double #ccc; padding: 20px; font-size: 40px; color: #777; } .draw_graph:hover { background-color: #f9f9f9; cursor: pointer; } .draw_graph span{ font-size: 13px !important; display: inline-block; } .draw_graph form{ margin: 0 auto; font-size: 20px; line-height: 2; display: table; text-align: left; } .draw_graph input[type=button]{ margin-top: 10px; } .draw_graph a { font-size: 15px; display: block; margin-top: 10px; color: #1e6be5; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container thumbnail thumbnail-post col-sm-12 set_value" style="padding: 30px;"> </div> 

Answer 1

删除one用法on并使用.stopPropagation（）防止父级点击，请在下面的代码段中找到

 set_container(); $("body").on('click', '#one_to_many', function () { $(this).html('<form action="demo_form.asp">\\ <input type="checkbox" name="graph" value="like" checked> one<br>\\ <input type="checkbox" name="graph" value="comment" checked> two<br>\\ <input type="checkbox" name="graph" value="friend" checked> three<br>\\ <input class="graph_btn" type="button" value="draw">\\ </form>'); $("#one_to_many").unbind("click").bind("click"); }); function set_container() { $(".set_value").html('<div id = "one_to_many" class="draw_graph col-md-8 col-md-offset-2 text-center" style="margin-bottom: 25px;">\\ click here\\ </div>'); } $("body").on('click', '.graph_btn', function (e) { e.stopPropagation(); $(this).attr('disabled', 'disabled'); $(this).css({"cursor": "wait", "opacity": ".5"}); $(this).after('<a onclick="set_container();">start again</a>'); }); $("body").on('click',"form",function(e){ e.stopPropagation(); }) 

 .draw_graph{ border: 4px double #ccc; padding: 20px; font-size: 40px; color: #777; } .draw_graph:hover { background-color: #f9f9f9; cursor: pointer; } .draw_graph span{ font-size: 13px !important; display: inline-block; } .draw_graph form{ margin: 0 auto; font-size: 20px; line-height: 2; display: table; text-align: left; } .draw_graph input[type=button]{ margin-top: 10px; } .draw_graph a { font-size: 15px; display: block; margin-top: 10px; color: #1e6be5; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container thumbnail thumbnail-post col-sm-12 set_value" style="padding: 30px;"> </div> 

Answer 2

基本上，您是在父元素内单击子元素。

我已经更改了代码并添加了e.stopPropagation(); 在子元素中单击以停止父级click

改变了几件事

1-$（“ body”）至$（document）

2-添加了用于调试和测试的alert() ，可以将其删除

3-将#one_to_many更改为.one_to_many

 set_container(); $(document).on('click', '.one_to_many', function () { $(this).html('<form action="demo_form.asp">\\ <input type="checkbox" name="graph" value="like" checked> one<br>\\ <input type="checkbox" name="graph" value="comment" checked> two<br>\\ <input type="checkbox" name="graph" value="friend" checked> three<br>\\ <input class="graph_btn" type="button" value="draw">\\ </form>'); $(".one_to_many").unbind("click").bind("click"); }); function set_container() { $(".set_value").html('<div class="one_to_many draw_graph col-md-8 col-md-offset-2 text-center" style="margin-bottom: 25px;">\\ click here\\ </div>'); } $(document).on('click', '.graph_btn', function (e) { e.stopPropagation(); $(this).attr('disabled', 'disabled'); $(this).css({"cursor": "wait", "opacity": ".5"}); $(this).after('<a onclick="set_container();">start again</a>'); }); $(document).on('click',"form",function(e){ e.stopPropagation(); }) 

  .draw_graph{ border: 4px double #ccc; padding: 20px; font-size: 40px; color: #777; } .draw_graph:hover { background-color: #f9f9f9; cursor: pointer; } .draw_graph span{ font-size: 13px !important; display: inline-block; } .draw_graph form{ margin: 0 auto; font-size: 20px; line-height: 2; display: table; text-align: left; } .draw_graph input[type=button]{ margin-top: 10px; } .draw_graph a { font-size: 15px; display: block; margin-top: 10px; color: #1e6be5; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container thumbnail thumbnail-post col-sm-12 set_value" style="padding: 30px;"> </div>