0

私はjquery.uiを使用していくつかのソート可能なliを作成しました。また、最後に新しいliを追加する追加ボタンがあります。これにより、すべてのli内に削除テキストがあり、そのクリックで親liが削除されますが、この削除機能はうまく機能していません新しく作成されたliでは、テキストを削除するためのクリックアクションが、新しく追加されたliで機能していないと言うべきです。 動作デモ用

$(function() {
        $( "#sortable" ).sortable({
            placeholder: "ui-state-highlight"
        });
        $( "#sortable" ).disableSelection();


        $(".btn").click(function (e) {

            e.preventDefault();
            var fieldsCount = $(".remove").length;
            if(fieldsCount){
                number = $('ul#sortable li:last').attr("id");
                number++;
                $("#sortable").append('<li id ="'+number+'" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item '+number+' <a class="remove hello'+number+'">remove</a></li>');
                        $("#sortable").sortable('refresh');
                }else{
                    $("#sortable").append('<li id="1" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1 <a class="remove hello1">remove</a></li>');
                    $("#sortable").sortable('refresh');
                }

        });
        $("a.remove").click(function(){
            $(this).parent().remove();
        });
    });
4

2 に答える 2

2

の代わりに、委任されたイベント モード.click()で試してください。.on()

    $("#sortable").on("click", "a.remove", function(){
        $(this).parent().remove();
    });

使用する.click()と、ハンドラーはその時点で存在する要素にのみバインドされるため、後で追加された要素では自動的に機能しません。.on()メソッドを使用すると、既に存在する親にハンドラーをバインドできますが、2 番目のパラメーターで、本当に関心のある要素に一致するセレクターを指定できます。これらの要素は、呼び出し時にまだ存在している必要はありません.on()。詳しい説明は docoを読んでください。

デモ: http://jsfiddle.net/8fXWw/1/

于 2013-03-13T10:16:32.193 に答える
0

クリック イベントは、動的に追加された要素では機能しません。動的に追加された LI にクリック イベントをバインドするには、jQuery.on を使用する必要があります。このようなもの：

$("#sortable").on("click", "a.remove", function(){
    $(this).parent().remove();
});
于 2013-03-13T10:21:49.973 に答える