Home/ Questions/Q 7941863
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T23:47:45+00:00

I am working on a system that allows the user to generate objects from

  • 0

I am working on a system that allows the user to generate objects from objects. It is similar to the Win7 sticky note system; a sticky note can make a new sticky note, and delete itself. I am trying to implement this with jquery, yet there is a duplication issue when i try to add new objects.

In jquery i tell the code to make a second “object” which is a variable that holds the html for an object that contains an add and delete button in it. If you view the html page, it makes more sense. When I tell jquery to make the object, it does perfectly. Except that the object that it made does not make more objects! jquery for some reason does not recognize the presence of the new object that it just created. And as a solution i tried restating the .click() functions that listen for the user to click on the add or delete buttons. That only made it multiply the amount whenever i added a new object, and this whole time the delete button has not been functioning properly.

Can someone please fix my code?

<html>
    <head>
        <style type="text/css">
            .environment {height:500px; width:500px; border:1px solid black;background:lightyellow;text-align:center;overflow:auto;}
            .object {height:50px; width:40%;border:1px solid black;background:#F0F0F0;padding:5px;margin:5px;float:left;}
            .delObject {float:right;}
        </style>
        <script type="text/javascript" src="jquery-1.7.2.js"></script>
        <script type="text/javascript">
            var object = "<div class='object'>object<br /><button class='addObject'>addObject()</button><button class='delObject'>delObject()</button></div>";
            $(function() {
                $(".addObject").click(function(){addObject()});
            });
            $(function() {
                $(".delObject").click(function(){
                    $(this).parent().remove();
                });
            });
            function addObject() {
                $(object).appendTo(".environment");
                $(function() {
                    $(".addObject").click(function(){addObject()});
                });
                $(function() {
                    $(".delObject").click(function(){
                        $(this).parent().remove();
                    });
                });
            }
        </script>
    </head>
    <body>
        <div class="environment">environment<br />
            <div class="object">object<br />
            <button class="addObject">addObject()</button>
            <button class="delObject">delObject()</button>
        </div>
        </div>
    </body>
</html>

If this all seems too complicated, can someone please tell me of a way in which i can make html objects in jquery, which are capable of making and deleting more of themselves without using the .clone() function.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Event delegation.

    $(function(){
    var object = "<div class='object'>object<br /><button class='addObject'>addObject()</button><button class='delObject'>delObject()</button></div>";
    $( ".environment" )
        .on( "click", ".addObject", function () {
            $( object ).appendTo( ".environment" );
        })
        .on( "click", ".delObject", function () {
            $( this ).parent().remove();
        });        
});

    The reason your code multiplies on each click is you are adding an additional click event to all existing elements with said class every time you add a new one. With event delegation, you no longer need to bind an event to each element, instead, the ancestor element (.environment) handles the events.

    • 0