jQuery未能找到動態元素

Question

我有jQuery處理一些其他動態元素，包括來自相同部分的元素，但我似乎無法通過名稱或id訪問元素，如下所示。

嘗試訪問元素我經歷了一些jQuery選擇器，但沒有一個在這個實例中工作，我不知道爲什麼。

我已經試過[name=$'value']，[name~='value']在我下面的代碼所示的和小提琴（[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 &#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 
});