jQuery找不到动态元素
jQuery failing to find Dynamic Element
我让jQuery处理我的许多其他动态元素,包括来自同一分部的元素,但我似乎无法通过下面显示的名称或id访问这些元素。
为了尝试访问元素,我经历了许多jQuery选择器,但在这个实例中没有一个有效,我不知道为什么。
我已经尝试了[name=$'value']
、[name~='value']
以及下面代码中显示的那个(在我的另一个代码中也以类似的身份工作)和fiddle([name*='value']
),但没有找到这些元素。
这是什么原因/我应该做什么或不应该做什么?
Fiddle
下方代码
将cshtml呈现为HTML标记:
<div class="ui-grid-c ui-responsive">
<div class="ui-block-a">
<p class="lblStyle">Size(CIDR) *</p>
</div>
</div>
<div id="editorRowsRIpM">
<div class="editorRow">
<input type="hidden" name="pa_ipv4s[d23c87dc-56e0-4a5b-ab53-2631deb2094d].requestedIps.index" autocomplete="off" value="ff43c12e-d79d-4554-9a4b-b2152946dcdc" />
<div class="ui-grid-c ui-responsive">
<div class="ui-block-a"> <span>
<input data-val="true" data-val-required="Allocation type required." id="pa_ipv4s_d23c87dc-56e0-4a5b-ab53-2631deb2094d__requestedIps_ff43c12e-d79d-4554-9a4b-b2152946dcdc__requestedIpType" name="pa_ipv4s[d23c87dc-56e0-4a5b-ab53-2631deb2094d].requestedIps[ff43c12e-d79d-4554-9a4b-b2152946dcdc].requestedIpType" type="hidden" value="Requested" />
<input class="checkforcontent" data-val="true" data-val-number="The field requestedIpCidr must be a number." data-val-regex="The field requestedIpCidr must match the regular expression '^[0-9]*$'." data-val-regex-pattern="^[0-9]*$" data-val-required="CIDR required." id="pa_ipv4s_d23c87dc-56e0-4a5b-ab53-2631deb2094d__requestedIps_ff43c12e-d79d-4554-9a4b-b2152946dcdc__requestedIpCidr" name="pa_ipv4s[d23c87dc-56e0-4a5b-ab53-2631deb2094d].requestedIps[ff43c12e-d79d-4554-9a4b-b2152946dcdc].requestedIpCidr" type="text" value="" />
</span>
</div>
<div class="ui-block-b">
<p class="lblStyle">Mask *</p>
</div>
<div class="ui-block-b"> <span>
<input class="checkforcontent" data-val="true" data-val-length="The field requestedIpMask must be a string with a maximum length of 16." data-val-length-max="16" data-val-regex="The field requestedIpMask must match the regular expression ''b(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)'.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)'.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)'.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)'b'." data-val-regex-pattern="'b(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)'.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)'.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)'.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)'b" data-val-required="Mask required." id="pa_ipv4s_d23c87dc-56e0-4a5b-ab53-2631deb2094d__requestedIps_ff43c12e-d79d-4554-9a4b-b2152946dcdc__requestedIpMask" name="pa_ipv4s[d23c87dc-56e0-4a5b-ab53-2631deb2094d].requestedIps[ff43c12e-d79d-4554-9a4b-b2152946dcdc].requestedIpMask" type="text" value="" />
</span>
</span>
</div>
</div>
</div>
</div>
带有通配符选择器的JQuery:
function pad(n, width, z) {
z = z || '0';
n = n + '';
return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
}
$("input[name*='requestedIpCidr']").change(function () {
var prefix = $(this).val();
var zeros = pad(0, 32 - prefix, 0);
if (32 - prefix == 0) zeros = '';
var full = pad(zeros, 32, 1);
var octets1 = full.substring(0, 8);
var octets2 = full.substring(8, 16);
var octets3 = full.substring(16, 24);
var octets4 = full.substring(24, 32);
var o1 = parseInt(octets1, 2).toString(10);
var o2 = parseInt(octets2, 2).toString(10);
var o3 = parseInt(octets3, 2).toString(10);
var o4 = parseInt(octets4, 2).toString(10);
$(this).nextAll("input[name*='requestedIpMask']").first().val(o1 + '.' + o2 + '.' + o3 + '.' + o4);
});
由于nextAll()
得到了以下所有的同级元素,而元素input[name*='requestedIpMask']
不是同级元素,因此它无法找到元素。
您可以使用.closest()
向上遍历,然后使用.find()
$(this).closest('.ui-grid-c').find("input[name*='requestedIpMask']")
而不是
$(this).nextAll("input[name*='requestedIpMask']")
更新的Fiddle
由于您是动态创建元素,因此使用.on()委派事件方法来使用事件委派。
通用语法
$(document).on('event','selector',callback_function)
示例
$(parentStaticContainer).on('click', "input[name*='requestedIpCidr']", function(){
//Your code
});
相关文章:
- 将列表元素动态添加到ul元素中
- 将输入 html 元素动态关联到颜色选取器
- 媒体元素 - 动态加载音频
- 根据其内部元素动态更改 CSS
- 编写脚本以向元素动态添加.current(类似活动类)的场景
- 使用knockoutjs虚拟元素动态创建html部分
- 将JS中的元素动态添加到XUL中
- 如何从jquery中获得元素动态附加的完整表
- 使用jquery向li元素动态添加类
- 点击事件不't在尝试将元素动态添加到<ul>标签
- 使用Knockout.js Issue将元素动态添加到嵌套列表中
- 如何从DOM元素动态禁用popover
- 将样式元素动态插入DOM的最后一种跨浏览器方式
- 无法将元素动态添加到数组中
- 指令如何等待元素'动态插值属性被处理?
- 设置活动元素和非活动元素(动态)
- 是否可以使用JS/PHP为网页中的元素动态分配ID
- 如何制造<光>元素动态调整以填充浏览器窗口的整个宽度
- 基于页面元素动态构建菜单结构
- 向现有元素动态添加删除绑定