对于动态创建的元素,只绑定一次单击事件
bind a click event only once for dynamically created elements
更新:Fiddle示例
代码将通过选择框动态创建一个文本链接。如何将单击事件绑定到它一次,以便每个动态创建的链接只向表中添加数据一次。我尝试过.one
和off
中的一种方法,但都不起作用。
代码:
$(function (){
$('.area').each(function(){
var area = $(this),
selectbox = area.find('select'),
show = area.find('.show'),
dialog_open = $(this).find(".dialog_open");
selectbox.change(function(){
selectbox = $(this).find('option:selected').text();
show.html('<a href="#" onclick="javascript: return false" class="dialog_open">'+selectbox+'</a>')
});
var foo = function() {
var dialog_open_text = $(this).find(".dialog_open").text();
$('td').html(dialog_open_text);
};
show.on( "click",dialog_open, foo );
show.off( "click", dialog_open, foo );
});
});
HTML:
<div class="area">
<select>
<option>Choose</option>
<option>One</option>
<option>Two</option>
</select>
<div class="show">
</div>
</div>
<div class="area">
<select>
<option>Choose</option>
<option>One</option>
<option>Two</option>
</select>
<div class="show">
</div>
</div>
<table>
<thead>
<tr>
<th>Title 1</th>
<th>Title 2</th>
<th>Title 3</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
更改
show.on( "click",dialog_open, foo );
show.off( "click", dialog_open, foo );
至
show.one( "click",dialog_open, foo );
jsFiddle
jQuery将附加一个事件处理程序,该事件处理程序在被调用一次后将自行分离。
相关文章:
- iOS鼠标中心绑定只工作一次
- KnockoutJS绑定每个文档不止一次
- 数据互绑定问题:转换器只运行一次,无法绑定元素的 ID
- AngularJs一次绑定和布尔运算符的值顺序
- 绑定两次或更多次的事件 jquery
- 如何将一个事件绑定两次到 JavaScript 插件
- NG-模型似乎只在模态视图内的离子单选按钮上绑定一种方式
- 绑定一次后如何重新绑定 jqgrind
- KNOCKOUTJS 不能将绑定多次应用于同一元素
- 元素上的多次单击绑定仅在挖空.js中执行一次
- G+ 登录按钮回调绑定两次
- 挖空 + MVC - 不能将绑定多次应用于同一元素
- 在AJAX中使用一次后重新绑定Click事件
- AngularJS:绑定一次属性
- 在JavaScript中,第一个绑定决定了谁“;这个“;是(绑定两次或第二次并不重要)
- jQuery 绑定多次触发
- 在knockoutjs中绑定两次自定义处理程序
- 我如何绑定一个JQuery事件,使它只触发一次
- 为什么函数实例的绑定会为下一次计算提供原始值
- 对于动态创建的元素,只绑定一次单击事件