0

私はこれを使用しようとしていました：

フィドル

しかし、彼が使用している jQuery のバージョンはかなり古いようです。

ただし、彼のコードに表示される唯一の必要な更新は、に変更.live()すること.on()です。しかし、変更すると削除ボタンが機能しなくなりました。

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

誰でも理由がわかりますか？

4

2 に答える 2

1

書き換え、いくつかの廃止されたメソッド、文字列から作成された動的要素、すべてのparent()、同じIDなどをターゲットにする必要があるようです:

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

    $('#addScnt').on('click', function (e) {
        e.preventDefault();
        var p = $('<p />'),
            l = $('<label />', {for: 'inp_'+i}),
            j = $('<input />', {type: 'text', 
                                id: 'inp_'+i, 
                                size: 20,
                                name: 'p_scnt_' + i,
                                placeholder: 'Input Value'
                               }),
            a = $('<a />', {href : '#', 
                            id: 'remScnt_' + i,
                            'class' : 'remScnt',
                            text: 'Remove'
                           });

        p.append(l.append(j), a).appendTo(scntDiv);
        i++;
    });

    scntDiv.on('click', '.remScnt', function (e) {
        e.preventDefault();
        if (i > 2) {
            $(this).closest('p').remove();
            i--;
        }
    });
});

フィドル

于 2013-05-12T02:14:08.750 に答える
1
  1. ID は一意である必要があります (ただし、これは問題の原因ではありません)。
  2. 新しく追加されたコンテンツには委任が必要です。

jQuery

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

    $('#addScnt').on('click', function () {
        $('<p><label for="p_scnts"><input type="text" class="p_scnt" 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 () {
        if (i > 2) {
            $(this).parents('p').remove();
            i--;
        }
        return false;
    });
});

HTML

<h2><a href="#" id="addScnt">Add Another Input Box</a></h2>

<div class="p_scents">
    <p>
        <label for="p_scnts">
            <input type="text" id="p_scnt" size="20" name="p_scnt" value="" placeholder="Input Value" />
        </label>
    </p>
</div>

これは完全に機能します: http://jsfiddle.net/uFkPx/

于 2013-05-12T02:09:38.480 に答える