.nextAll函數在點擊函數中不起作用

Question

我試圖在模式窗口中列出的複選框內使用jquery中的.nextAll選項..所以當用戶點擊一個鏈接並打開模式窗口時，通過函數.on（「click」），那就是當chexkbox出現時，我在click函數中寫了一個代碼，它改變了複選框的檢查屬性。在的jsfiddle或者說我們創造，BT當我創建了一個點擊功能內使用也不會WRK一個新的HTML內試圖當

$('input[name="Company"],input[name="Country"]').live("click",function(){ 

if ($(this).is(':checked')){ 
    alert("s"); 
     $(this).nextAll('input[name="'+this.name+'Sub"]').prop('checked',true); 
} else { 
     alert("n"); 
     $(this).nextAll('input[name="'+this.name+'Sub"]').prop('checked',false); 
} 
}); 

<input type="checkbox" class="entityCheckboxHeader1" id="entityCheckboxHeader" name="Company">Company 
<input class="modalEntityCompany" id="entity1" type="checkbox" name="CompanySub">Microsoft 
<input class="modalEntityCompany" id="entity2" type="checkbox" name="CompanySub">Apple 
<br /> 
<input type="checkbox" class="entityCheckboxHeader2" id="entityCheckboxHeader" name="Country">Country 
<input class="modalEntity" id="entity3" type="checkbox" name="CountrySub">USA 
<input class="modalEntity" id="entity4" type="checkbox" name="CountrySub">UK 

程序工作正常independly。什麼可能導致衝突？

注：進出口使用.live（）函數的複選框，因爲它甚至不會獲得在當。對（）用於

動態創建部分

function generateTreeHTML(input) { 

var html = ''; 
var entityNumber = 1; 
var color = 663399; 
html = "<ul id='tree' class='treeview-black' >"; 
for (var m = 0; m < input.length; m++) { 


     html+="<li>"; 

    currentEntity = input[m]; 

    currentEntityType = currentEntity.entity; 

    html += "<span style='font-size:12px; font-family:Helvetica; font-weight:bold;' id='entityHeader' class='entityHeader" 
      + getEntityHeader() 
      + "'><input name='" + currentEntityType +"' type='checkbox' id='entityCheckboxHeader' class=\"" 
      + 'entityCheckboxHeader' 
      + getEntityCheckboxHeader() 
      + "\" />" 
      + currentEntityType 
      + "</span><div style='width:15px; height:10px; background-color:#" 
      + colorArray[entityNumber] 
      + "; float:right; margin-right:50px; margin-top:5px;'></div>"; 
      html+="<ul>"; 
    for (var n = 0; n < currentEntity[currentEntityType].length; n++) { 
     html += "<li>"; 
     var entityName = currentEntity[currentEntityType][n].entity; 
     var entityName1 = entityName.split('.').join(""); 
     entityName1 = entityName1.split('_').join(""); 
     entityName1 = entityName1.replace(/ /g, ""); 
     html += "<span><input type='checkbox' key=\"" + entityName 
       + "\" mapKey=\"" + currentEntityType 
       + "\" categoryNumber=\"" + entityNumber 
       + "\" class='modalEntity' id=\"" + 'entity' + getEntityID() 
       + "\" name='" + currentEntityType + "Sub'>" + entityName + "</span>"; 

     html += "</li>"; 

    } 

    html+="</ul></li>"; 
    entityNumber = entityNumber + 1; 
    html += "<div style='width:200px; border-bottom:1px solid #cccccc; height:1px;'></div>"; 
} 
html += "</ul>"; 
return html; 
    } 

Answer 1

的.nextAll() method只找到下一個兄弟元素（如在doco中非常清楚地陳述）。您正在動態創建的結構似乎將相關複選框分別放置在不同li元素內部的自身跨度中，即它們分別是而不是彼此的兄弟或您的點擊處理程序所屬的標題複選框。你不能指望你使用的遍歷方法來找到不同的html結構的元素，而不僅僅是從我的辦公室到我家的駕駛路線，這些方法都可以用於你的房子。

試試這個：

$('input[name="Company"],input[name="Country"]').live("click",function(){  
    if ($(this).is(':checked')){ 
     alert("s"); 
     $('input[name="'+this.name+'Sub"]').prop('checked',true); 
    } else { 
     alert("n"); 
     $('input[name="'+this.name+'Sub"]').prop('checked',false); 
    } 
}); 

這可以大大簡化爲：

$('input[name="Company"],input[name="Country"]').live("click",function(){  
     $('input[name="'+this.name+'Sub"]').prop('checked',this.checked);  
}); 

或者，如果您擔心可能有同名的其他複選框您的文檔在其他地方你可以看起來與點擊的標題框所屬的li元素相同：

$(this).closest('li') 
     .find('input[name="'+this.name+'Sub"]').prop('checked',this.checked); 

Answer 2

給一類.nextAll部分說checkinput到複選框input[name="Company"] and input[name="Country"]"

$('body').delegate(".checkinput","click",function(){ 

    if ($(this).is(':checked')){ 
     alert("s"); 
      $(this).nextAll('input[name="'+$(this).attr('name')+'Sub"]').prop('checked',true); 
    } else { 
      alert("n"); 
      $(this).nextAll('input[name="'+$(this).attr('name')+'Sub"]').prop('checked',false); 
    } 
    });