0

JQuery 1.9.1 を使用しているため、.live() を使用していた古い風邪から適応させた JavaScript コードを .on() に変更しました。

新しい入力フィールドの追加は正しく機能します。問題は、[削除] をクリックしても、追加されたフィールドが削除されないことです。イベントクリックイベントも実行されておらず、その理由を理解できませんでした。

HTML コード:

<h2><a href="#" id="addScnt">Add Another Input Box</a></h2>
<div id="p_scents">
<p>
    <label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt" value="" placeholder="Input Value" /></label>
    <a href="#" id="remScnt">Remove</a>
</p>
</div>

JS コード:

$(function() {
    var scntDiv = $('#p_scents');
    var i = $('#p_scents p').size() + 1;

    $('#addScnt').on('click', function() {
            $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
            i++;
            return false;
    });

    $('#remScnt').on('click', function() { 
        alert('remove');
            if( i > 2 ) {
                    $(this).parents('p').remove();
                    i--;
            }
            return false;
    });
});
4

4 に答える 4

1

イベントの委任。

また、ID の重複は避けてください。

代わりにクラスに変更しました。

HTML

<h2><a href="#" id="addScnt">Add Another Input Box</a></h2>
<div id="p_scents">
<p>
    <label for="p_scnts"><input type="text" size="20" name="p_scnt" value="" placeholder="Input Value" /></label>
    <a href="#" class="remScnt">Remove</a>
</p>
</div>

JavaScript

$(function() {
    var scntDiv = $('#p_scents');
    var i = $('#p_scents p').size() + 1;

    $('#addScnt').on('click', function() {
            $('<p><label for="p_scnts"><input type="text" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" class="remScnt">Remove</a></p>').appendTo(scntDiv);
            i++;
            return false;
    });

    $('#p_scents').on('click', '.remScnt', function() { 
        alert('remove');
            if( i > 2 ) {
                    $(this).parents('p').remove();
                    i--;
            }
            return false;
    });
});
于 2013-04-23T18:36:44.263 に答える
1

動的に生成されたコンテンツに対して削除機能を実行しようとしている場合は、次のハンドラーを使用します。

$(document).on('click', '#addScnt', function() {
        $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
        i++;
        return false;
});

$(document).on('click', '#remScnt', function() { 
    alert('remove');
        if( i > 2 ) {
                $(this).parents('p').remove();
                i--;
        }
        return false;
});
于 2013-04-23T18:33:52.363 に答える
0

問題は、1 つのselector by idID を持つ 1 つの要素のみが存在する必要があることです

于 2013-04-23T18:56:43.713 に答える
0

.on()動的に生成された要素に対して でイベント委任を試す

$(document).on('click','#remScnt', function() { 
        alert('remove');
            if( i > 2 ) {
                    $(this).parents('p').remove();
                    i--;
            }
            return false;
});
于 2013-04-23T18:33:42.337 に答える