Why events don't work for the HTML I push by jQuery?

Question

Please follow these steps:

• Run code snippet below
• Click on click here
• Click on draw button
• Click on start again link
• Click on click here, See? nothing happens.

Why? And how can I fix it?

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

Basically you were clicking on a child element inside a parent element.

I have changed the code and added e.stopPropagation(); in child element click to stop parent click

Changed few things

1 - $("body") to $(document)

2 - added alert() for debugging and testing, you can remove it

3 - changed #one_to_many to .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>

Answer 2

Remove one use on and use .stopPropagation() to prevent parent clicks please find below snippet

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>