Question

我让jQuery处理了许多其他动态元素，包括来自同一部分的元素，但我似乎无法通过名称或id访问元素，如下所示。

要尝试访问该元素，我已经浏览了许多jQuery选择器，但没有一个在这个实例中工作，我不知道为什么。

我已经尝试了[name=$'value']，[name~='value']和我下面的代码中显示的那个（也在我的其他代码中以类似的身份工作）和小提琴（[name*='value']）但没有找到这些元素。

这是什么原因，应该或不应该做什么？

以下代码

将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 &#39;^[0-9]*$&#39;." 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 &#39;\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&#39;." 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);
});

Answer 1

由于nextAll()获得以下所有兄弟，而元素input[name*='requestedIpMask']不是兄弟，因此无法找到元素。

您可以使用.closest()遍历，然后使用.find()

$(this).closest('.ui-grid-c').find("input[name*='requestedIpMask']")

而不是

$(this).nextAll("input[name*='requestedIpMask']")

Updated Fiddle

由于您使用Event Delegation委托事件方法动态创建元素，因此使用.on()。

一般语法

$(document).on('event','selector',callback_function)

实施例

$(parentStaticContainer).on('click', "input[name*='requestedIpCidr']", function(){
    //Your code
});

jQuery无法找到动态元素

1 个答案: