[英]Custom event firing multiple times in Jquery
我到處都在尋找類似的問題,但是添加off(), one()
等並不能解決問題,這是其他SO問題中的給定解決方案。
我有一個表,可以在其中添加或編輯數據。 如果要編輯數據,則將表行數據加載到一個選擇框中,當您單擊“添加”時,應刪除預覽行並添加一個具有修改后數據的新行。
問題在於第一次編輯后,由於修改后的行已被動態添加,因此它不再起作用。 為此,我的解決方案是觸發一個自定義事件,在此可以使用“代理傳播”。
到目前為止,我試圖觸發我的自定義事件,問題是調用它時會觸發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=""> </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=""> </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>
您似乎在某個地方有一些table
變量。
$.each(table, function(index, value) {
它看起來像有多個項目table
,因為你撥打each
就可以了。 接着:
$(table).one('testEvent'
如果table
解析為多個項目/節點,則每個項目/節點都會收到您的自定義事件,因此您將看到多個警報,就像事件被多次調用一樣。
看起來您已經找到答案了,但這是一個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');
}
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.