jQuery failing to find Dynamic Element

Question

I have jQuery working on a number of my other dynamic elements, including elements from the same partial but I can't seem to access the elements by name or id with the one shown below.

To try to access the element I have gone through a number of jQuery selectors, but none are working in this instance and I don't know why.

I have tried [name=$'value'], [name~='value'] and the one shown in my code below (also working in a similar capacity in my other code) and fiddle ([name*='value']) but none are finding these elements.

What is the cause of this/what should or shouldn't I be doing?

Fiddle

CODE BELOW

Rendered cshtml as HTML markup:

<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 with wild card selector:

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);
});

• jonny: Have you tried using event delegation? Like $(document).on("change", "input[name*='requestedIpCidr']"), function() { ... });

Answer 1

Since nextAll() get all the following sibling and element input[name*='requestedIpMask'] is not the sibling thus its fails to find element.

You can use .closest()to traverse up then use .find()

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

instead of

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

Updated Fiddle

---

Since you are create elements dynamically use Event Delegation using .on() delegated-events approach.

General Syntax

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

Example

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

• PurpleSmurph: Just tested on my end, not fully working but think that's due to content not being there on page load, tested on fiddle and works beautifully - thank you! Thanks for the explanation as well - will mark accepted when allowed.
• Satpal: @PurpleSmurph, You also need to use Event Delegation see updated answer
• PurpleSmurph: OK I shall look into that. Cheers