1

我有一个简单的表格，允许某人添加/删除额外的电话号码。出于某种原因，我在我的 Javascript 中看不到错误。用户可以毫无问题地将新号码添加为列表项——每个列表项都有一个用于删除列表项的按钮。如果用户单击第一个列表项删除按钮，则该项被删除。使用 JS 添加的列表项都不会从页面中删除。

这看起来很简单，但我很难过。在过去的两个小时里，我试图通过在 stackoverflow 和谷歌上的许多搜索来解决这个问题。我知道当它解决后我会觉得很傻，但我可以在这方面寻求帮助。

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，但它只对页面上的原始列表项执行此操作，而不是列表的其余部分项目。

我在这里有一个关于 JS Bin 的示例设置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

您可以在 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 回答
0

您的以下按钮不起作用的原因是因为它们是动态添加到 DOM 中的，并且您绑定到的 click 事件不会为将来的元素触发。

使用.on()代替，它将确保将来的元素也被绑定。

在此处查看更新的示例：http: //jsbin.com/omanij/5/edit

于 2013-03-25T03:47:46.907 回答