1

私は簡単なフォームを持っています。これにより、誰かが余分な電話番号を追加/削除できます。何らかの理由で、Javascriptにエラーが表示されません。ユーザーは問題なくリストアイテムとして新しい番号を追加できます。各リストアイテムには、リストアイテムを削除するためのボタンがあります。ユーザーが最初のリストアイテムの削除ボタンをクリックすると、アイテムが削除されます。JSで追加されたリストアイテムはいずれもページから削除されません。

これはとても単純に思えますが、私は困惑しています。私は過去2時間、stackoverflowやgoogleで多くの検索を行ってこれを解決しようとしてきました。私はそれが解決されたときに私が愚かであると感じることを知っています、しかし私はこれでいくらかの助けを使うことができました。

HTML

<ul class="telRow">
  <li id="telid_1234">
    ONE <button class="telRowRemove">-</button>
  </li>
</ul>

<div>
  <button class="telRowAdd">+</button>
</div>

<div id="errors">No errors</div>

<div class="emptyTel" style="display: none;">
<input type="text" name="tel_no[]" />
<button class="telRowRemove">-</button> 
</div>

JS

$(document).ready(function(){

  $('.telRowAdd').on('click', function() {
     var Container = $('ul.telRow');
     var newrow = '<li>ONE <button class="telRowRemove">-</button></li>';
     Container.append(newrow);
      $('#errors').text('Added');
  });

  $('.telRowRemove').click(function() {
      $(this).parent('li').remove();
      $('#errors').text('Removed');
  });
});

削除ボタンのクラスは.telRowRemoveであるため、理論的にはボタンをクリックすると$（'。telRowRemove'）。clickがトリガーされますが、これはページ上の元のリストアイテムに対してのみ行われ、残りのリストは行われません。アイテム。

ここにJSBinのサンプルセットアップがありますhttp://jsbin.com/omanij/1/edit

4

3 に答える 3

3

セレクターは、イベントを検索するときに存在する要素にのみイベントをバインドします。イベント委任を使用して、後で表示されるものと一致させます。

$('#parent_of_tel_rows').on('click', '.telRowRemove', function() {
    $(this).parent('li').remove();
    $('#errors').text('Removed');
});
于 2013-03-25T03:42:49.413 に答える
0

次のボタンが機能しない理由は、それらがDOMに動的に追加され、バインドするクリックイベントが将来の要素に対して発生しないためです。

代わりに.on（）を使用してください。これにより、将来の要素も確実に結合されます。

ここで更新された例を参照してください：http：//jsbin.com/omanij/5/edit

于 2013-03-25T03:47:46.907 に答える
0

以下のjsfiddleで動作モデルを見つけることができます。

http://jsfiddle.net/btjcz/

$('.telRowAdd').on('click', function () {
        var Container = $('ul.telRow');
        var newrow = $('<li>ONE </li>');
        var btnRemove = $('<button class="telRowRemove">-</button>');

        btnRemove.click(function () {
            $(this).parent('li').remove();
            $('#errors').text('Removed');
        });
        newrow.append(btnRemove);



        Container.append(newrow);
        $('#errors').text('Added');
    });
于 2013-03-25T03:59:34.520 に答える