请查看此fiddle example。
我正在使用$('parentselector').on('click','selector', function(){
将click事件绑定到动态创建的链接,以便当有人点击它时,它会在表格中显示其值。但html()
函数仍然返回旧链接的值。谁能指出这个例子的问题是什么?
jQuery的:
$(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>')
});
show.on('click',dialog_open, function(){
var dialog_open_text = dialog_open.text();
$('td').html(dialog_open_text);
});
});
});
HTML:
<div class="area">
<select>
<option>Choose</option>
<option>One</option>
<option>Two</option>
</select>
<div class="show">
<a class="dialog_open" onclick="javascript: return false" href="#">Three</a>
</div>
</div>
<div class="area">
<select>
<option>Choose</option>
<option>One</option>
<option>Two</option>
</select>
<div class="show">
<a class="dialog_open" onclick="javascript: return false" href="#">Four</a>
</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>
答案 0 :(得分:1)
<强> Example 强>
将.on(&#39;点击&#39;)换成.click(),然后从选择框中选择值。 :)
$(function(){
$('.area').each(function(){
var area = $(this),
selectbox = area.find('select'),
show = area.find('.show'),
dialog_open = $(this).find(".dialog_open")
selectbox.change(function(){
var selectbox = $(this),
value = selectbox.val();
show.html('<a href="#" onclick="javascript: return false" class="dialog_open">' + value + '</a>');
});
show.click(function(){
var dialog_open_text = $(this).siblings('select').val();
$('td').html(dialog_open_text);
});
});
});
P.S。您可能还应检查$(document).ready(),具体取决于您正在做什么。
答案 1 :(得分:1)
这是因为您只是在加载页面时定义“dialog_open”的值,并且通过编写dialog_open.text()它只是获取“旧”值。将其更改为:
show.on('click',dialog_open, function(){
var dialog_open_text = $(this).find(".dialog_open").text();
$('td').html(dialog_open_text);
});
答案 2 :(得分:1)
我们这样做:
$('parentselector').on('click','selector', function(){
理解当完成此绑定时,'parentselector'位于DOM中。否则我们使用:
$(document).on('click','selector', function(){
确保在DOM准备就绪中完成此操作。