Turn off dynamically created buttons using jQuery

Question

Turn off dynamically created buttons using jQuery

Whenever a user selects a checkbox in a table row and saves it, a new container is created to store the data in a specific format for that particular row.

Note: The data displayed in the table is sourced from JSON.

Additionally, users have the option to manually add data to the same container using a form.

Later on, all these containers or data holders will be appended to a parent container in the DOM.

Although I have successfully managed to swap these data containers, I am facing an issue with disabling or hiding buttons for the first and last containers.

Below is the script I am using:

<script>
    // Code goes here
</script>

The top button for the first data holder should be disabled as there is no container above it to swap. Similarly, the down button for the last data holder should be disabled as there is no container below it to swap with.

I'm unsure about what might be wrong with my implementation?

Note: Everything works perfectly when using hardcoded data holders instead of generating them dynamically.

jquery html css dynamic

Answer 1

Answer №1

To properly handle event delegation, make sure to include a delegated listener.

$('ParentElementWithStaticReference').on('event', 'TargetElementToObserve', function() {
  // Implement desired functionality here
});

Answer 2

To properly handle event delegation, make sure to include a delegated listener.

$('ParentElementWithStaticReference').on('event', 'TargetElementToObserve', function() {
  // Implement desired functionality here
});

Answer 3

Answer №2

When dealing with elements that are generated dynamically, it is recommended to utilize delegated event handlers in the following manner:

$("body").on("click", selector, function() {
     //perform desired actions
});

Answer 4

When dealing with elements that are generated dynamically, it is recommended to utilize delegated event handlers in the following manner:

$("body").on("click", selector, function() {
     //perform desired actions
});

Answer 5

Answer №3

Below is the full code snippet.

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
        <style>
            .parent {
                height: 25%;
                width: 90%;
                padding: 1%;
                margin-left: 1%;
                margin-top: 1%;
                border: 1px solid black;

            }

            .parent:nth-child(odd){
                background: skyblue;
            }

            .parent:nth-child(even){
                background: green;
            }

            .disabled-btn {
              cursor: not-allowed;
              opacity: 0.25%;
            }

        </style>
    </head>
    <body>
        <button class="btn btn-primary" onclick="getData()">Get Data</button>
        <form>
            <label>Count: </label>
            <input type="text" placeholder="Enter a count" id="mycount">
            <button onclick="saveData()">Submit</button>
        </form>
        <div class="box">

        </div>



    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script>
        var content = "";

        function getData(){

                for(var count=0; count<4; count++){

                content+= '<div class="container parent"><div class="row article-row"><div class="col-md-6 article data-col"><div class="row"><form class="form-horizontal"><div class="form-group"><label class="control-label col-md-4">Count:</label><div class="col-md-8 article-data">'+count+'</div></div></form></div></div><div class="col-md-6 article btn-col"><div class="row del-btn"><button class="btn btn-danger remove-btn">Delete &nbsp;<span class="glyphicon glyphicon-remove"></span></button></div><div class="row updown-btn"><div class="btn-group"><button class="btn btn-primary btn-sm top-btn"><span class="glyphicon glyphicon-arrow-up"></span></button><button class="btn btn-primary btn-sm down-btn"><span class="glyphicon glyphicon-arrow-down"></span></button></div></div></div></div></div>';

                }
                $('.box').html(content);

            $('.remove-btn').click(function(){
                $(this).parents('.parent').remove();
            });


            resetEvents();
        }

        function saveData(){
            var count = $("#mycount").val();
            content+= '<div class="container parent"><div class="row article-row"><div class="col-md-6 article data-col"><div class="row"><form class="form-horizontal"><div class="form-group"><label class="control-label col-md-4">Count:</label><div class="col-md-8 article-data">'+count+'</div></div></form></div></div><div class="col-md-6 article btn-col"><div class="row del-btn"><button class="btn btn-danger remove-btn">Delete &nbsp;<span class="glyphicon glyphicon-remove"></span></button></div><div class="row updown-btn"><div class="btn-group"><button class="btn btn-primary btn-sm top-btn"><span class="glyphicon glyphicon-arrow-up"></span></button><button class="btn btn-primary btn-sm down-btn"><span class="glyphicon glyphicon-arrow-down"></span></button></div></div></div></div></div>';

            $('.box').html(content);
            $('.remove-btn').click(function(){
                $(this).parents('.parent').remove();
            });
        }

        function handleEvents() {
                $(".top-btn, .down-btn").prop("disabled", false).show();
                $(".parent:first").find('.top-btn').attr('disabled','disabled');

                $(".parent:first").find(".top-btn").prop("disabled", true).hide();


                $(".parent:last").find(".down-btn").prop("disabled", true).hide();
            }


            function resetEvents() {

                $(".top-btn, .down-btn").unbind('click');

                handleEvents();

                $('.down-btn').click(function() {
                    var toMove1 = $(this).parents('.parent');

                    $(toMove1).insertAfter($(toMove1).next());

                    handleEvents();
                });

                $('.top-btn').click(function() {
                    var toMove1 = $(this).parents('.parent');

                    $(toMove1).insertBefore($(toMove1).prev());
                    handleEvents();
                });

            }


    </script>
    </body>
</html>


            resetEvents();
        }

        function saveData(){
            var count = $("#mycount").val();
            content+= '<div class="container parent><div class="row article-row"><div class="col-md-6 article data-col"><div class="row"><form class="form-horizontal"><div class="form-group"><label class="control-label col-md-4">Count:</label><div class="col-md-8 article-data">'+count+'</div></div></form></div></div><div class="col-md-6 article btn-col"><div class="row del-btn"><button class="btn btn-danger remove-btn"><Delete &nbsp;<span class="glyphicon glyphicon-remove"></span></button></div><div class="row updown-btn"><div class="btn-group"><button class="btn btn-primary btn-sm top-btn"><span class="glyphicon glyphicon-arrow-up"></span></button><button class="btn btn-primary btn-sm down-btn"><span class="glyphicon glyphicon-arrow-down"></span></button></div></div></div></div></div>';

            $('.box').html(content);
            $('.remove-btn').click(function(){
                $(this).parents('.parent').remove();
            });
        }

        function handleEvents() {
                $(".top-btn, .down-btn").prop("disabled", false).show();
                $(".parent:first").find('.top-btn').attr('disabled','disabled');

                $(".parent:first").find(".top-btn").prop("disabled", true).hide();


                $(".parent:last").find(".down-btn").prop("disabled", true).hide();
            }


            function resetEvents() {

                $(".top-btn, .down-btn").unbind('click');

                handleEvents();

                $('.down-btn').click(function() {
                    var   
   assist

                };

Answer 6

Below is the full code snippet.

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
        <style>
            .parent {
                height: 25%;
                width: 90%;
                padding: 1%;
                margin-left: 1%;
                margin-top: 1%;
                border: 1px solid black;

            }

            .parent:nth-child(odd){
                background: skyblue;
            }

            .parent:nth-child(even){
                background: green;
            }

            .disabled-btn {
              cursor: not-allowed;
              opacity: 0.25%;
            }

        </style>
    </head>
    <body>
        <button class="btn btn-primary" onclick="getData()">Get Data</button>
        <form>
            <label>Count: </label>
            <input type="text" placeholder="Enter a count" id="mycount">
            <button onclick="saveData()">Submit</button>
        </form>
        <div class="box">

        </div>



    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script>
        var content = "";

        function getData(){

                for(var count=0; count<4; count++){

                content+= '<div class="container parent"><div class="row article-row"><div class="col-md-6 article data-col"><div class="row"><form class="form-horizontal"><div class="form-group"><label class="control-label col-md-4">Count:</label><div class="col-md-8 article-data">'+count+'</div></div></form></div></div><div class="col-md-6 article btn-col"><div class="row del-btn"><button class="btn btn-danger remove-btn">Delete &nbsp;<span class="glyphicon glyphicon-remove"></span></button></div><div class="row updown-btn"><div class="btn-group"><button class="btn btn-primary btn-sm top-btn"><span class="glyphicon glyphicon-arrow-up"></span></button><button class="btn btn-primary btn-sm down-btn"><span class="glyphicon glyphicon-arrow-down"></span></button></div></div></div></div></div>';

                }
                $('.box').html(content);

            $('.remove-btn').click(function(){
                $(this).parents('.parent').remove();
            });


            resetEvents();
        }

        function saveData(){
            var count = $("#mycount").val();
            content+= '<div class="container parent"><div class="row article-row"><div class="col-md-6 article data-col"><div class="row"><form class="form-horizontal"><div class="form-group"><label class="control-label col-md-4">Count:</label><div class="col-md-8 article-data">'+count+'</div></div></form></div></div><div class="col-md-6 article btn-col"><div class="row del-btn"><button class="btn btn-danger remove-btn">Delete &nbsp;<span class="glyphicon glyphicon-remove"></span></button></div><div class="row updown-btn"><div class="btn-group"><button class="btn btn-primary btn-sm top-btn"><span class="glyphicon glyphicon-arrow-up"></span></button><button class="btn btn-primary btn-sm down-btn"><span class="glyphicon glyphicon-arrow-down"></span></button></div></div></div></div></div>';

            $('.box').html(content);
            $('.remove-btn').click(function(){
                $(this).parents('.parent').remove();
            });
        }

        function handleEvents() {
                $(".top-btn, .down-btn").prop("disabled", false).show();
                $(".parent:first").find('.top-btn').attr('disabled','disabled');

                $(".parent:first").find(".top-btn").prop("disabled", true).hide();


                $(".parent:last").find(".down-btn").prop("disabled", true).hide();
            }


            function resetEvents() {

                $(".top-btn, .down-btn").unbind('click');

                handleEvents();

                $('.down-btn').click(function() {
                    var toMove1 = $(this).parents('.parent');

                    $(toMove1).insertAfter($(toMove1).next());

                    handleEvents();
                });

                $('.top-btn').click(function() {
                    var toMove1 = $(this).parents('.parent');

                    $(toMove1).insertBefore($(toMove1).prev());
                    handleEvents();
                });

            }


    </script>
    </body>
</html>


            resetEvents();
        }

        function saveData(){
            var count = $("#mycount").val();
            content+= '<div class="container parent><div class="row article-row"><div class="col-md-6 article data-col"><div class="row"><form class="form-horizontal"><div class="form-group"><label class="control-label col-md-4">Count:</label><div class="col-md-8 article-data">'+count+'</div></div></form></div></div><div class="col-md-6 article btn-col"><div class="row del-btn"><button class="btn btn-danger remove-btn"><Delete &nbsp;<span class="glyphicon glyphicon-remove"></span></button></div><div class="row updown-btn"><div class="btn-group"><button class="btn btn-primary btn-sm top-btn"><span class="glyphicon glyphicon-arrow-up"></span></button><button class="btn btn-primary btn-sm down-btn"><span class="glyphicon glyphicon-arrow-down"></span></button></div></div></div></div></div>';

            $('.box').html(content);
            $('.remove-btn').click(function(){
                $(this).parents('.parent').remove();
            });
        }

        function handleEvents() {
                $(".top-btn, .down-btn").prop("disabled", false).show();
                $(".parent:first").find('.top-btn').attr('disabled','disabled');

                $(".parent:first").find(".top-btn").prop("disabled", true).hide();


                $(".parent:last").find(".down-btn").prop("disabled", true).hide();
            }


            function resetEvents() {

                $(".top-btn, .down-btn").unbind('click');

                handleEvents();

                $('.down-btn').click(function() {
                    var   
   assist

                };

Turn off dynamically created buttons using jQuery

Answer №1

Answer №2

Answer №3

Similar questions

Troubleshooting: iOS Web App Splash Screen fails to load

Can the JavaScript code be altered within the client's browser?

Tips on modifying the message "Please fill out this field" in the JQuery validation plugin

Preserving proportions in CSS using both width and height measurements

Displaying identical information in a bootstrap dropdown menu

Dynamic HTML element

Conflict between Play framework and jQuery AJAX calls

Obtaining a specific data point from a JSON object sourced from Twitter

Utilizing a flexbox container within a table container, implementing PRE tags for handling overflow

Is there a way I could customize this design to include buttons that smoothly navigate to the following section?

Enable jquery offsetParent() function

Create an HTML div element that spans the full width of the

Unable to render nested HTML tag in simple React.JS component

Tips for transferring a value from a Swift UITextField to a text field within an HTML form in a WKWebView using Swift

JavaScript: Hover Effects and Toggle Functions

Setting up Jquery autocomplete with jquery 1.6.2: A step-by-step guide

Please click the provided link to display the data in the div. Unfortunately, the link disappearance feature is currently not

problem with overlapping elements

The website takes forever to load on Internet Explorer and it keeps freezing

What new features have they incorporated into the latest Foxy Bingo website?