Javascript 在Jquery中多次触发自定义事件
我到处都找过类似的问题,但加上一个等等并不能解决它,这是其他SO问题的给定解决方案 我有一个可以添加或编辑数据的表。如果要编辑数据,表格行数据将加载到选择框中,当您单击“添加”时,它将删除预览行并添加一个包含修改数据的新行 问题是在第一次编辑之后,因为修改的行是以数字方式添加的,所以它不再工作。为此,我的解决方案是触发一个自定义事件,我可以在其中使用“委托传播” 到目前为止,我试图触发我的自定义事件,问题是当它被调用时,它会触发3到4次。我不知道为什么 以下是“添加”按钮的代码:Javascript 在Jquery中多次触发自定义事件,javascript,jquery,Javascript,Jquery,我到处都找过类似的问题,但加上一个等等并不能解决它,这是其他SO问题的给定解决方案 我有一个可以添加或编辑数据的表。如果要编辑数据,表格行数据将加载到选择框中,当您单击“添加”时,它将删除预览行并添加一个包含修改数据的新行 问题是在第一次编辑之后,因为修改的行是以数字方式添加的,所以它不再工作。为此,我的解决方案是触发一个自定义事件,我可以在其中使用“委托传播” 到目前为止,我试图触发我的自定义事件,问题是当它被调用时,它会触发3到4次。我不知道为什么 以下是“添加”按钮的代码: $("#add
$("#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>
您似乎在某个地方有一些表变量
$.each(table, function(index, value) {
表中似乎有多个项目,因为您对每个项目都进行了调用。然后:
$(table).one('testEvent'
如果表解析为多个项目/节点,则每个项目/节点都将接收您的自定义事件,因此您将看到多个警报,就好像事件被多次调用一样。您似乎在某个地方有一些表变量
$.each(table, function(index, value) {
表中似乎有多个项目,因为您对每个项目都进行了调用。然后:
$(table).one('testEvent'
如果表解析为多个项目/节点,则每个项目/节点都将接收您的自定义事件,因此您将看到多个警报,就好像事件被多次调用一样。看起来您已经得到了答案,但这里有一个JSFIDLE解决了您的问题,它不会在循环中的“表”上触发您可能会发现有趣的事件,并且在处理来自父/子元素的数据时可以很好地处理事件
看起来您已经得到了答案,但这里有一个JSFIDLE解决了您的问题,它不会在循环中的“表”上触发,您可能会发现它很有趣,并且在处理来自父/子元素的数据时可以很好地处理事件
添加、创建html或JSFIDLE:我正在使用ajax调用一些信息,这样小提琴就不会工作了,但我会添加我的htmlAdd、你的html,或者制作一个JSFIDLE我正在使用ajax调用一些信息,这样小提琴就不会工作了,但我会添加我的HTML,你说得对!表正在调用html表,我对每个表进行了迭代,正如您所说的,它正在为每个表调用事件。我更改了它,以便在每个循环中调用值,这样只有当前行触发事件。非常感谢。是的,你是对的!表正在调用html表,我对每个表进行了迭代,正如您所说的,它正在为每个表调用事件。我更改了它,以便在每个循环中调用值,这样只有当前行触发事件。非常感谢。