Question

我到处寻找类似的问题，但添加off(), one()等并没有修复它，这是其他SO问题中的给定解决方案。

我有一个表格，您可以添加或编辑数据。如果要编辑数据，表格行数据将加载到选择框中，当您点击“添加”时，它应该删除预览行并添加一个带有修改数据的新预览。

问题是在第一次编辑之后，因为修改后的行被动态添加，它不再有效。为此我的解决方案是触发一个自定义事件，我可以使用＆＃39;委托传播＆＃39;。

到目前为止，我试图触发我的自定义事件，问题是当它被调用时会触发3到4次。我不知道为什么。

以下是添加按钮的代码：

$("#addButton").click(function(e){

      // bunch of code where i get the info from select boxes

      // Here I loop through the table to see if any of the rows ids match current id, 
      // if it does it should delete that row so I call my custom event
      $.each(table, function(index, value) {
         var sid = $(value).children("td:nth-child(1)").data('sitioId');

         // if this matches it means that there already exists a row, so we edit it
         if(sid == sitioId) {
           editRol_id = $(value).children("td:nth-child(4)").children().first().attr('id');
           $(table).trigger('testEvent');
           return false;
      }
});

这是我的自定义事件：

$(table).one('testEvent',function(e, eventInfo) {
  e.preventDefault();
  alert('test');

}）;

现在它只有警报，因为我只是试图正确调用它，但警报会多次触发。

如果您需要更多信息或任何其他信息，请告诉我们。谢谢你的时间。

编辑：这是我的html

这是数据

的表格

<div class="panel">
   <div class="col-sm-3"></div>
      <div class="panel-body col-sm-6">
          <div class="table-responsive">
             <table class="table table-hover nomargin" id="relacionRol">
                <thead>
                  <tr>
                    <th>Sitio</th>
                    <th>Rol</th>
                    <th>Categoría</th>
                    <th></th>
                  </tr>
                </thead>
                <tbody>
                   <!-- start foreach -->
                   <tr>
                     <td class="sitio_id" data-sitio-id="id" >name</td>
                     <td class="rol_id" data-rol-id="id" >name</td>
                     <td class="categoria_id" data-categoria-id="id1, id2"> name</td>
                     <td>
                        <a href="#" id="editRol<?php echo $i;?>" class="edit"><span class="fa fa-edit"></span></a>
                        <a href="#" id="deleteRol<?php echo $i;?>" class="del"><span class="fa fa-trash"></span></a>
                     </td>
                   </tr>
                   <!-- end foreach -->
                </tbody>
            </table>
        </div><!-- table-responsive -->
    </div>
</div>

这是用于编辑数据的选择框：

<div class="form-group" id="rolSitio1">
    <label class="col-sm-3 control-label">Sitio</label>
    <div class="col-sm-2">
        <select id="sitios1" class="select2 sitio" name="sitio_id" style="width: 100%" data-placeholder="Elegir un sitio">
             <option value="">&nbsp;</option>
             <!-- php for other options -->
         </select>
    </div>
    <label class="col-sm-1 control-label">Rol</label>
    <div class="col-sm-2">
          <select id="roles1" class="select2 rol" name="rol_id" style="width: 100%" data-placeholder="Elegir un rol">
             <option value="">&nbsp;</option>
             <!-- php for other options -->
          </select>
    </div>
    <div id="categoriaWrapper">
       <label class="col-sm-1 control-label">Categoría</label>
       <div class="col-sm-2">
          <select name="categoria_id" style="width: 100%" id="categorias1" class="select2 form-control categoria" multiple>
          <!-- this data is loaded with ajax -->
          </select>
       </div>
    </div>
    <button id="addButton" class="btn"><i class="fa fa-arrow-up"></i></button>
</div>

Answer 1

你似乎在某个地方有一些table变量。

$.each(table, function(index, value) {

看起来table中有多个项目，因为您在其上调用了each。然后：

$(table).one('testEvent'

如果table解析为多个项目/节点，那么每个项目/节点都会收到您的自定义事件，因此您会看到多个警报，就像多次调用事件一样。

Answer 2

看起来你已经得到了你的答案，但是这里有一个解决你的问题的jsfiddle（不会在循环内的'table'上触发）你可能会觉得有趣并且在处理来自父/子的数据时很好地处理事件元素

https://jsfiddle.net/sd6fvae7/2/

<input type='text' id='sitio_id_check'/>
<button id='addRecord'>Add record</button>

<table id="relacionRol">
  <tr id='row1' >
    <td class="sitio_id" data-sitio-id="id1">sitio_id id1</td>
  </tr>
  <tr id='row2'>
    <td class="sitio_id" data-sitio-id="id2">sitio_id id2</td>
  </tr>
  <tr id='row3'>
    <td class="sitio_id" data-sitio-id="id3">sitio_id id3</td>
  </tr>
</table>

<div id='output1'>
</div>

$('#relacionRol').on('testEvent', function(e, someParameter){
    $('#output1').append("Event fired on: #" + $(e.target).attr('id') + "<br />");
    $('#output1').append("someParameter: " + someParameter);
});

$('#addRecord').on('click', function(e){
    // Look for matching records and trigger event on table if match is found
  // Or you could do this on the table row if you prefer
  $('#relacionRol tr').each(function(){
    if($(this).find('.sitio_id').data('sitio-id') == $('#sitio_id_check').val()){
        $('#output1').append("Match in: #" + $(this).attr('id') + "<br />");
      $('#relacionRol').trigger('testEvent', 'value passed to event handler');
    }
  });
});

在Jquery

2 个答案: