0

我正在开发一个允许用户从对象生成对象的系统。类似于Win7的便签系统；便笺可以制作新的便笺，并自行删除。我正在尝试使用 jquery 来实现这一点，但是当我尝试添加新对象时存在重复问题。

在 jquery 中，我告诉代码创建第二个“对象”，它是一个变量，用于保存包含添加和删除按钮的对象的 html。如果您查看html页面，则更有意义。当我告诉 jquery 制作对象时，它做得很完美。除了它制造的物体没有制造更多的物体！jquery 由于某种原因无法识别它刚刚创建的新对象的存在。作为一种解决方案，我尝试重述 .click() 函数来监听用户单击添加或删除按钮。这只会使每当我添加一个新对象时它的数量就会增加，而这整个过程中删除按钮都没有正常工作。

有人可以修复我的代码吗？

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

如果这一切看起来太复杂了，有人可以告诉我一种方法，我可以在 jquery 中制作 html 对象，这些对象能够在不使用 .clone() 函数的情况下制作和删除更多自己。

4

1 回答 1

5

事件委托。

$(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();
        });        
});

您的代码在每次单击时成倍增加的原因是，每次添加新元素时，您都在向具有所述类的所有现有元素添加一个额外的单击事件。使用事件委托，您不再需要将事件绑定到每个元素，而是由祖先元素 (.environment) 处理事件。

于 2012-05-17T14:31:26.230 回答