Jqueryでカスタムイベントを複数回発生する

Question

私はどこでも同じような質問をしましたが、off(), one()などを追加することはそれを修正するものではありません。

データを追加または編集できるテーブルがあります。データを編集する場合は、テーブルの行データが選択ボックスにロードされます。[追加]をクリックすると、プレビュー行が削除され、変更されたデータが追加されます。

問題は最初に編集した後、変更された行が追加されたため問題なく動作します。このため私の解決策は、私が '代理伝播'を使うことができるカスタムイベントを引き起こすことです。

これまでのところ私はカスタムイベントをトリガーしようとしていますが、問題はそれが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'); 

}）;

今のところ私はちょうどそれが正しく呼ばれるようにしようとしているので警告がありますが、警告は複数回発生します。

さらに詳しい情報が必要な場合は、私に知らせてください。あなたの時間をありがとう。

編集：ここでは、このデータは

<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> 

あるテーブルでも、私のhtml

であり、これはデータを編集するために使用さセレクトボックスです：

<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

あなたがように見えますどこかでの変数があります。

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

は、それはあなたがそれにeachを呼び出すため、複数の項目は、tableであるように見えます。そして：tableは、複数のアイテム/ノードに解決

$(table).one('testEvent' 

場合には、それらのそれぞれは、このようにあなたは、イベントが複数回呼び出されたかのように複数のアラートが表示され、カスタムイベントを受け取ります。

Answer 2

あなたの答えはすでにわかっているようですが、あなたの問題を解決するjsfiddle（ループ内の 'テーブル'ではトリガーしません）は、とにかく面白いと思うかもしれませんし、親/子要素

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'); 
    } 
    }); 
});