[英]bind a click event only once for dynamically created elements
更新: 小提琴示例
该代码将通过选择框动态创建文本链接。 如何将一次click事件与其绑定一次,以便每个动态创建的链接仅将数据添加到表一次。 我曾尝试.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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.