jQuery .next() 在表格中不起作用
Posted
技术标签:
【中文标题】jQuery .next() 在表格中不起作用【英文标题】:jQuery .next() not working when in table 【发布时间】:2011-11-10 18:32:03 【问题描述】:我有一组复选框,每个复选框都有一个与之关联的下拉菜单。当用户单击复选框时,复选框值及其下拉列表将发送到服务器。
我最初将每个都放在 ul 中,但将其更改为表格以保持下拉列表对齐。在我这样做之后,下一个功能停止工作。请求中的 var 甚至消失了。如果我硬编码一个值,它会显示备份。
函数如下:
$(document).delegate('.cbxAmenity', 'click', function()
$("#dialogNotify").append(" Saving...").dialog();
var thisAmenity = (this.id).replace("AmenityList_", "");
$.ajax(
url: 'ajax_url.php',
dataType: 'json',
data:
ResortId: $("#id").val(),
action: 'save',
amenity: thisAmenity,
locality: $(this).next().val() // if i change to 'foo' it works
,
success: function()
$("#dialogNotify").dialog("close");
ui.amenityDialog();
,
error: function()
$("#dialogNotify").html("There was an error saving amenity");
);
编辑:这是表格...它由另一个 ajax 调用生成:
$("#dialogAmenity").html("<table id='amenityList'><tr><th>Amenity</th><th>Locality</th></tr>");
for(var index=0; index<amenities.length; index++)
$("#amenityList").append("<tr><td><input type='checkbox' name='AmenityList_"+
amenities[index].AmenitiesID + "' id='AmenityList_"+
amenities[index].AmenitiesID + "' class='cbxAmenity' /> "+
amenities[index].Name +
"</td><td><select id='locality' name='locality'>"+
"<option value='RESORT'>Resort</option>" +
"<option value='NEARBY'>Near by</option>" +
"</select></td></tr>");
if (amenities[index].link == true)
$("#AmenityList_"+amenities[index].AmenitiesID).prop('checked', true);
$("#dialogAmenity").append("</table>");
再次编辑:这是 Firebug 的 html
<table id="amenityList">
<tbody>
<tr>
<th>Amenity</th>
<th>Locality</th>
</tr>
<tr>
<td>
<input name="AmenityList_1" id="AmenityList_1" class="cbxAmenity" type="checkbox"> Indoor Pool
</td>
<td>
<select id="locality" name="locality">
<option value="RESORT">Resort</option>
<option value="NEARBY">Near by</option>
</select>
</td>
</tr>
<tr>
<td>
<input name="AmenityList_2" id="AmenityList_2" class="cbxAmenity" type="checkbox"> Fitness Gym
</td>
<td>
<select id="locality" name="locality">
<option value="RESORT">Resort</option>
<option value="NEARBY">Near by</option>
</select>
</td>
</tr>
<tr>
<td>
<input name="AmenityList_3" id="AmenityList_3" class="cbxAmenity" type="checkbox"> Beach Access
</td>
<td>
<select id="locality" name="locality">
<option value="RESORT">Resort</option>
<option value="NEARBY">Near by</option>
</select>
</td>
</tr>
<tr>
<td>
<input name="AmenityList_4" id="AmenityList_4" class="cbxAmenity" type="checkbox"> Laundry Room
</td>
<td>
<select id="locality" name="locality">
<option value="RESORT">Resort</option>
<option value="NEARBY">Near by</option>
</select>
</td>
</tr>
</tbody>
</table>
【问题讨论】:
你能发布table
的html吗?
这是一个创建表格的脚本。你能展示一个最终创建的表格的例子吗?
@greg,刚刚又更新了表格代码
【参考方案1】:
cbxAminity
类的元素是<td>
标记中的最后一个元素。因此,它没有next()
元素。你需要做的
$(this).parent().next().find('select').val();
为了在下一个<td>
中找到<select>
元素。
【讨论】:
做到了。我想知道在 td 容器内是否有影响,但不知道如何摆脱它,哈哈……谢谢 +1 有趣的是,在我回答这个问题之前,我看到另一个问题与相同的问题。【参考方案2】:您的表创建脚本包含一个缺陷。你不能以这种方式附加结束标签$(...).append("</table>")
。
var html = "<table id='amenityList'><tr><th>Amenity</th><th>Locality</th></tr>");
for(var index=0; index<amenities.length; index++)
html += "<tr><td><input type='checkbox' name='AmenityList_"+
amenities[index].AmenitiesID + "' id='AmenityList_"+
amenities[index].AmenitiesID + "' class='cbxAmenity'" +
(amenities[index].link == true ? "checked='checked'" : "") +
"/> "+
amenities[index].Name +
"</td><td><select id='locality' name='locality'>"+
"<option value='RESORT'>Resort</option>" +
"<option value='NEARBY'>Near by</option>" +
"</select></td></tr>");
html += "</table>";
$("#dialogAmenity").html(html);
【讨论】:
当我添加 $firebug 时有这样的说法:$(this.id).replace 不是函数url 第 374 行 @guyfromfl 我明白了。别介意我的第一个建议,删除这些括号,因为它们已经过时了。相反,请查看我建议的表格生成代码。 已将其更改为您的建议,但仍然没有创建该 var。 保留建议的更改,因为它需要正常运行。你能显示元素.cbxAminity
的HTML吗?
是的,确实保留了更改,因为它更有意义..一些浏览器假定关闭标签等...会将 .cbxAminity 编辑到我的 OP以上是关于jQuery .next() 在表格中不起作用的主要内容,如果未能解决你的问题,请参考以下文章
.next() 和 .addClass() 在 jquery 中不起作用
jquery next plus 切换不起作用。这是一个错误吗?
Javascript/ jQuery:以 CSV 格式导出数据在 IE 中不起作用