javascript - jQuery:在动态内容上触发事件

我正在尝试使用动态表

https://codepen.io/ashblue/pen/mCtuA

我想要一个按钮，用于删除表中的所有行。所以基本上，在类click的所有实例上触发.table-remove函数

我试图做以下

function deleteAll() {

        jQuery('.table-remove').each(function() {
            var currentElement = $(this);
            console.log(currentElement);
            currentElement.trigger('click');
        });
    }

点击定义为

$('.table-remove').click(function() {
            console.log("triggered");
            $(this).parents('tr').detach();
        });

但是当我调用deleteAll函数时什么也没有发生。我什至没有在控制台上找到任何东西

我这样做对吗？

最佳答案

我想要一个按钮，用于删除表中的所有行。因此，基本上，在类.table-remove的所有实例上触发click函数。


您可以这样做，但是将表组织成以下代码要简单得多：


包含标题行的<thead>
包含可见行的<tbody>
包含行模板的<tbody>


因此，“全部删除”按钮后面的代码可以非常简单地选择第一个<tbody>和.remove()中的所有行。

的HTML

<div class="container">
  <h1>HTML5 Editable Table</h1>
  <p>Through the powers of <strong>contenteditable</strong> and some simple jQuery you can easily create a custom editable table. No need for a robust JavaScript library anymore these days.</p>

  <ul>
    <li>An editable table that exports a hash array. Dynamically compiles rows from headers</li>
    <li>Simple / powerful features such as add row, remove row, move row up/down.</li>
  </ul>

  <div id="table" class="table-editable">
    <span class="table-add glyphicon glyphicon-plus"></span>
    <table class="table">
      <thead> <!-- <<<< wrap the header row in <thead>...</thead> -->
      <tr>
        <th>Name</th>
        <th>Value</th>
        <th></th>
        <th></th>
      </tr>
      </thead>
      <tbody class="main"> <!-- <<<< wrap the visible row(s) in <tbody>...</tbody> -->
      <tr>
        <td contenteditable="true">Stir Fry</td>
        <td contenteditable="true">stir-fry</td>
        <td>
          <span class="table-remove glyphicon glyphicon-remove"></span>
        </td>
        <td>
          <span class="table-up glyphicon glyphicon-arrow-up"></span>
          <span class="table-down glyphicon glyphicon-arrow-down"></span>
        </td>
      </tr>
      </tbody>
      <tbody class="hide"> <!-- <<<< wrap the template row in its own hidden <tbody>...</tbody> -->
      <tr>
        <td contenteditable="true">Untitled</td>
        <td contenteditable="true">undefined</td>
        <td>
          <span class="table-remove glyphicon glyphicon-remove"></span>
        </td>
        <td>
          <span class="table-up glyphicon glyphicon-arrow-up"></span>
          <span class="table-down glyphicon glyphicon-arrow-down"></span>
        </td>
      </tr>
      </tbody>
    </table>
  </div>

  <button id="export-btn" class="btn btn-primary">Export Data</button>
  <button id="deleteAll-btn" class="btn btn-primary">Delete All</button>
  <p id="export"></p>
</div>

另一方面是如何最好地将单击处理程序附加到三行操作-删除，上移和下移。

由于行是动态创建/附加的，因此，方法是使用jQuery的$(static-container).on(event, descendent-selector, handler)将单击处理委托给容器（例如表）。这会将所需的操作附加到所有当前行和将来的行。

Java脚本

jQuery(function($) {
    var $TABLE = $('#table table');
    var $BTN = $('#export-btn');
    var $BTN2 = $('#deleteAll-btn');
    var $EXPORT = $('#export');
    $('.table-add').on('click', function() {
        $('tbody.hide tr', $TABLE).clone(true).appendTo($('tbody.main', $TABLE));
    });
    $TABLE.on('click', '.table-remove', function() { // delegate row removal to the table
        $(this).closest('tr').remove();
    });
    $TABLE.on('click', '.table-up', function() { // delegate row-up movement to the table
        var $row = $(this).closest('tr');
        $row.insertBefore($row.prev());
    });
    $TABLE.on('click', '.table-down', function() { // delegate row-down movement to the table
        var $row = $(this).closest('tr');
        $row.insertAfter($row.next());
    });
    $BTN.on('click', function() {
        var $headers = $('thead th', $TABLE).not(':empty').map(function() {
            return $(this).text().toLowerCase();
        });
        var $data = $('tbody.main tr', $TABLE).map(function() {
            var $td = $(this).find('td'),
                h = {};
            $headers.each(function(i, header) {
                h[header] = $td.eq(i).text();
            });
            return h;
        });
        $EXPORT.text(JSON.stringify($headers.get().concat($data.get())));
    });
    $BTN2.on('click', function deleteAll() {
        $("tbody.main tr", $TABLE).remove();
    });
});

DEMO。