0

私は、ユーザーがオブジェクトからオブジェクトを生成できるようにするシステムに取り組んでいます。これは、Win7の付箋システムに似ています。付箋は新しい付箋を作成し、それ自体を削除することができます。これをjqueryで実装しようとしていますが、新しいオブジェクトを追加しようとすると重複の問題が発生します。

jqueryで、追加と削除のボタンを含むオブジェクトのhtmlを保持する変数である2番目の「オブジェクト」を作成するようにコードに指示します。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 に答える