【发布时间】:2014-05-26 15:42:49
【问题描述】:
代码将通过选择框动态创建文本链接。您将如何将单击事件仅绑定一次,以便每个动态创建的链接只会将数据添加到表中一次。我已经尝试过.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>
【问题讨论】:
标签: javascript jquery html onclick