javascript - 为什么事件不适用于我通过 jQuery 推送的 HTML？

Question

请按照以下步骤操作:

• 运行下面的代码片段
• 点击点击这里
• 点击绘制按钮
• 点击重新开始链接
• 单击单击此处，看到了吗？没有任何反应。

为什么？我该如何解决？

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>