What could be causing the jQuery to not trigger events for the HTML I am trying to push?

Question

What could be causing the jQuery to not trigger events for the HTML I am trying to push?

Kindly adhere to these instructions:

Execute the code snippet below
Tap on click here
Select the draw button
Press on the start again link
Click on click here, Notice that nothing occurs.

What is causing this issue? And how can it be resolved?

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>

javascript jquery html css

Answer 1

Answer №1

Eliminate the one use of on and apply .stopPropagation() to avoid triggering parent clicks. See the code snippet below for implementation:

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

Eliminate the one use of on and apply .stopPropagation() to avoid triggering parent clicks. See the code snippet below for implementation:

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 3

Answer №2

Essentially, the issue was caused by clicking on a nested child element within a parent element.

To resolve this problem, I made some modifications to the code and inserted e.stopPropagation(); in the click event handler of the child element to prevent the parent's click event from firing.

Here are the key changes:

1 - Replaced $("body") with $(document)

2 - Included alert() for debugging purposes (can be removed later)

3 - Updated all instances of #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");

});
...

// The rest of the JavaScript code remains unchanged

// CSS styles for .draw_graph class
...

<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 4

Essentially, the issue was caused by clicking on a nested child element within a parent element.

To resolve this problem, I made some modifications to the code and inserted e.stopPropagation(); in the click event handler of the child element to prevent the parent's click event from firing.

Here are the key changes:

1 - Replaced $("body") with $(document)

2 - Included alert() for debugging purposes (can be removed later)

3 - Updated all instances of #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");

});
...

// The rest of the JavaScript code remains unchanged

// CSS styles for .draw_graph class
...

<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>

What could be causing the jQuery to not trigger events for the HTML I am trying to push?

Answer №1

Answer №2

Similar questions

The Chrome browser is experiencing issues with Bootstrap dropdowns that require a selection when the value is

Unable to set or select options using JavaScriptExecutor in C# Selenium

The ts-node encountered an issue with the file extension in this message: "TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension

Loading data dynamically in the Highcharts ng library allows for real-time updates to the

What is the best way to detect modifications to scope variables within a directive?

The operation state.concat cannot be performed as it is meant for arrays and not for type 'ITask'

Dropping and dragging in the Dojo for the nested lists

Retrieve the parent object within a constructor function

Utilizing Selenium to Click and Drag on the Browser Window in Order to Select Text on the Website

Issue with Vuetifyjs theme variable failing to function properly in version 1.0.0

Collecting information from JSON files

After a postback triggered by a different update panel, the item that was initially added to the dropdown menu using

Vuejs: Users can still access routes even after the token has been deleted

Is it possible to import data into a script?

Links for pagination become unresponsive after moving past the initial page

When using i18next interpolation in React components, the displayed output may show as [object Object]

Checking if the current value matches the previous value retrieved from a JSON file using JavaScript

Generate an array of arrays containing objects using different variable names

Stop Bootstrap IE menu from closing when scrollbar is clicked

Dynamic class/interface in Typescript (using Angular)