删除之前动态添加的小部件

Question

我正在使用 Gridster 制作仪表板。我有下一个代码 html：

<div class="gridster">
<ul id="widget_list">
  <li id="widg-1" data-row="1" data-col="1" data-sizex="2" data-sizey="2">1
    <a class='remove' href='#'>&times;</a>
  </li>
  <li id="widg-2" data-row="1" data-col="1" data-sizex="2" data-sizey="2">2
    <a class='remove' href='#'>&times;</a>
  </li>
  <li id="widg-3" data-row="1" data-col="1" data-sizex="2" data-sizey="2">3
    <a class='remove' href='#'>&times;</a>
  </li>
  <li id="widg-4" data-row="1" data-col="1" data-sizex="2" data-sizey="2">4
    <a class='remove' href='#'>&times;</a>
  </li>
</ul>
</div>  
<button id="addWidget" data-role="button">Add widget</button>

在这里，我的代码 Javascript：

var gridster;
  $(function(){
    var log = document.getElementById('log');

    gridster = $(".gridster ul").gridster({
      widget_base_dimensions: [100, 55],
      widget_margins: [5, 5],
      autogrow_cols: true,
      resize: {
        enabled: true
      }
    }).data('gridster');

    $(document).on( "click", "#addWidget", function(e) { 
       e.preventDefault(); 
       var li = $('#widget_list li').last();
       var data = li.attr("id");

       var array = data.split('-');
       var id = array[1];
       id++;
       gridster.add_widget.apply(gridster, ['<li id="widg-' + id + '">' + id + '<a class="remove" href="#">&times;</a></li>', 2, 2]);
    });

    $(".remove").click(function(){
        var id=$(this).parent().attr("id");
        alert(id);
        gridster.remove_widget($(".gridster ul").find("[id='" + id + "']"));
    });
  });

问题是当我想删除我之前动态添加的新小部件时。当我想删除它已经添加的小部件（四个）时，该功能可以完美运行。在另一种情况下，它不起作用。我看到的唯一奇怪的事情是，程序在新创建的小部件中添加了“style="display: list-item;" 作为参数。

有人可以帮助我吗？ 谢谢！

Answer 1

您面临的问题是 jQuery 性质的。所有dynamically created elements 都缺少为删除操作声明的绑定。

您应该将事件处理程序更改为：

$(document).on('click', '.remove', function(){
    var id=$(this).parent().attr("id");
    alert(id);
    gridster.remove_widget($(".gridster ul").find("[id='" + id + "']"));
});