0

ショートリスト ボックスを作成しようとしています。ユーザーが 1 つのボックスから要素を選択すると、次のボックスに表示されます。ユーザーがショートリストにある要素をクリックすると、その要素はリストから消えます。すべて正常に動作しています。しかし、最終候補の要素をクリックすると問題が発生します。理由がわからない。

コードは次のとおりです。

HTML:

<div id="secondbox">
    <div class="elements">
        Soni
    </div>
    <div class="elements">
        Soni1
    </div>
    <div class="elements">
        Soni2
    </div>
    <div class="elements">
        Soni3
    </div>
</div>

JQ:

$(".pink").click(function()
    {
        //$(this).remove();
        alert("Hi");
    });
    $(".elements").click(function()
    {
        if($(this).attr("class")=="elements")
        {
            $(this).clone().appendTo("#firstbox").addClass("pink");
            $(this).addClass("red");
        }
    });

CSS:

#secondbox,#firstbox{float:left;height:300px;width:300px;border:1px solid black;}
.elements{width:90%;margin:5px;border:1px dashed orange;}
.red{background-color:#d5d5d5;}
.pink{background-color:#BCED91;}

嘆願

4

1 に答える 1

0

2番目のリストでこれらの要素を動的に作成しているため.on()、クリックイベントをバインドするためにを使用する必要があります。

$(document).on('click',".pink",function () {
    $(this).remove();
    alert("Hi");
});

jsFiddleの例

上のドキュメントによると.on()：

イベントハンドラーは、現在選択されている要素にのみバインドされます。これらは、コードが.on（）を呼び出すときにページに存在している必要があります。要素が存在し、選択できることを確認するには、ページのHTMLマークアップにある要素のドキュメントレディハンドラー内でイベントバインディングを実行します。新しいHTMLがページに挿入されている場合は、要素を選択し、新しいHTMLがページに配置された後にイベントハンドラーをアタッチします。

于 2013-02-18T17:40:39.167 に答える