请按照以下步骤操作:
- 运行下面的代码片段
- 点击
点击这里
- 点击
绘制
按钮 - 点击
重新开始
链接 - 单击
单击此处
,看到了吗?没有任何反应。
为什么?我该如何解决?
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>
最佳答案
删除 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>
关于javascript - 为什么事件不适用于我通过 jQuery 推送的 HTML?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41950234/