Question

我正在开发一个允许用户从对象生成对象的系统。它类似于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（）函数的情况下制作和删除更多自己。

Answer 1

活动代表团。

$(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）处理事件。

Jquery追加对象乘法问题

1 个答案: