jQuery插件listnav無法正常工作

Question

我正在使用listNav來從我的數據庫中按字母順序排列數據。如果我將我的列表硬編碼到HTML頁面，插件就像一個魅力。問題在於數據庫有超過2500個條目，並且它們會不斷增長，因此每次更新時都要花費時間對輸入進行硬編碼。

我正在使用Javascript來讀取json文件並創建將打印到頁面中的輸出。輸出工作正常，問題不在那裏。問題是，當我從.js文件的輸出到我的html頁面時，該插件不能識別filterSelector並且它不顯示按字母順序的導航。我不確定爲什麼，因爲它與輸出到頁面中的硬編碼相同。

這是我layout.js文件

$(document).ready(function() { 
    var collection = ""; 
    var obj = []; 
    var html = ''; 
    var html2 = ''; 
    var html3 = ''; 
    $.getJSON("getDBData.php", function(data) { 
     var num = 1; 
     var json = JSON.stringify(data); 
     /* Here I get the information from the DB. No issues here*/ 
     } 
     html2 += '   <span id ="type_span" class="bronze">'; 
     html2 += '    <span class="company_name"><h2><a href="#">Beverly Crusher</a></h2></span>'; 
     html2 += '    <p hidden class="last-name">Crusher</p>  <br />'; 
     html2 += '    <span ><strong>Rank:</strong>&nbsp;</span><span>Commander</span>  <br />'; 
     html2 += '    <span class="exhibitor_text"><strong>Date of Birth:</strong>&nbsp;</span><span>Oct. 13, 2324</span>  <br />'; 
     html2 += '    <a class ="exhibitor_text" href="//www.example.com" target="_blank">Place of Birth:</a>  <br />'; 
     html2 += '   </span>'; 
     html2 += '   <span id ="type_span" class="bronze">'; 
     html2 += '    <span class="company_name"><h2><a href="#">Wesley Crusher</a></h2></span>'; 
     html2 += '    <p hidden class="last-name">Crusher</p>  <br />'; 
     html2 += '    <span ><strong></strong>&nbsp;</span><span>Ensign</span>  <br />'; 
     html2 += '    <span class="exhibitor_text"><strong>Date of Birth:</strong>&nbsp;</span><span>July 29, 2349</span>  <br />'; 
     html2 += '    <a class ="exhibitor_text" href="//www.example.com" target="_blank">Place of Birth:</a>  <br />'; 
     html2 += '   </span>'; 
     html2 += '   <span id ="type_span" class="bronze">'; 
     html2 += '    <span class="company_name"><h2><a href="#">Data</a></h2></span>'; 
     html2 += '    <p hidden class="last-name">Data</p>  <br />'; 
     html2 += '    <span ><strong></strong>&nbsp;</span><span>Lieutenant Commander</span>  <br />'; 
     html2 += '    <span class="exhibitor_text"><strong>Date of Birth:</strong>&nbsp;</span><span>Feb. 2, 2338</span>  <br />'; 
     html2 += '    <a class ="exhibitor_text" href="//www.example.com" target="_blank">Place of Birth:</a>  <br />'; 
     html2 += '   </span>'; 
     html2 += '   <span id ="type_span" class="bronze">'; 
     html2 += '    <span class="company_name"><h2><a href="#">Geordi La Forge</a></h2></span>'; 
     html2 += '    <p hidden class="last-name">La Forge</p>  <br />'; 
     html2 += '    <span ><strong></strong>&nbsp;</span><span>Commander</span>  <br />'; 
     html2 += '    <span class="exhibitor_text"><strong>Date of Birth:</strong>&nbsp;</span><span>Feb. 16, 2335</span>  <br />'; 
     html2 += '    <a class ="exhibitor_text" href="//www.example.com" target="_blank">Place of Birth:</a>  <br />'; 
     html2 += '   </span>'; 
     html2 += '   <span id ="type_span" class="bronze">'; 
     html2 += '    <span class="company_name"><h2><a href="#">Jean Luc Picard</a></h2></span>'; 
     html2 += '    <p hidden class="last-name">Picard</p>  <br />'; 
     html2 += '    <span ><strong></strong>&nbsp;</span><span>Captain</span>  <br />'; 
     html2 += '    <span class="exhibitor_text"><strong>Date of Birth:</strong>&nbsp;</span><span>July 13, 2305</span>  <br />'; 
     html2 += '    <a class ="exhibitor_text" href="//www.example.com" target="_blank">Place of Birth:</a>  <br />'; 
     html2 += '   </span>'; 
     html2 += '   <span id ="type_span" class="bronze">'; 
     html2 += '    <span class="company_name"><h2><a href="#">William Riker</a></h2></span>'; 
     html2 += '    <p hidden class="last-name">Riker</p>  <br />'; 
     html2 += '    <span ><strong></strong>&nbsp;</span><span>Captain</span>  <br />'; 
     html2 += '    <span class="exhibitor_text"><strong>Date of Birth:</strong>&nbsp;</span><span>August 19, 2335</span>  <br />'; 
     html2 += '    <a class ="exhibitor_text" href="//www.example.com" target="_blank">Place of Birth:</a>  <br />'; 
     html2 += '   </span>'; 
     html2 += '   <span id ="type_span" class="bronze">'; 
     html2 += '    <span class="company_name"><h2><a href="#">Deanna Troi</a></h2></span>'; 
     html2 += '    <p hidden class="last-name">Troi</p>  <br />'; 
     html2 += '    <span ><strong></strong>&nbsp;</span><span>Commander</span>  <br />'; 
     html2 += '    <span class="exhibitor_text"><strong>Date of Birth:</strong>&nbsp;</span><span>March 29, 2336 (Terran equivalent)</span>  <br />'; 
     html2 += '    <a class ="exhibitor_text" href="//www.example.com" target="_blank">Place of Birth:</a>  <br />'; 
     html2 += '   </span>'; 
     html2 += '   <span id ="type_span" class="bronze">'; 
     html2 += '    <span class="company_name"><h2><a href="#">Worf</a></h2></span>'; 
     html2 += '    <p hidden class="last-name">Worf</p>  <br />'; 
     html2 += '    <span ><strong></strong>&nbsp;</span><span>Lieutenant Commander</span>  <br />'; 
     html2 += '    <span class="exhibitor_text"><strong>Date of Birth:</strong>&nbsp;</span><span>December 9, 2340 (Terran equivalent)</span>  <br />'; 
     html2 += '    <a class ="exhibitor_text" href="//www.example.com" target="_blank">Place of Birth:</a>  <br />'; 
     html2 += '   </span>'; 
    } 
//  console.log(typeof(html2)); 
//  console.log(html2); 
//  $('.dbOutput').html(html2); 
}); 
html3 += '   <span id ="type_span" class="bronze">'; 
html3 += '    <span class="company_name"><h2><a href="#">Beverly Crusher</a></h2></span>'; 
html3 += '    <p hidden class="last-name">Crusher</p>  <br />'; 
html3 += '    <span ><strong>Rank:</strong>&nbsp;</span><span>Commander</span>  <br />'; 
html3 += '    <span class="exhibitor_text"><strong>Date of Birth:</strong>&nbsp;</span><span>Oct. 13, 2324</span>  <br />'; 
html3 += '    <a class ="exhibitor_text" href="//www.example.com" target="_blank">Place of Birth:</a>  <br />'; 
html3 += '   </span>'; 
html3 += '   <span id ="type_span" class="bronze">'; 
html3 += '    <span class="company_name"><h2><a href="#">Wesley Crusher</a></h2></span>'; 
html3 += '    <p hidden class="last-name">Crusher</p>  <br />'; 
html3 += '    <span ><strong></strong>&nbsp;</span><span>Ensign</span>  <br />'; 
html3 += '    <span class="exhibitor_text"><strong>Date of Birth:</strong>&nbsp;</span><span>July 29, 2349</span>  <br />'; 
html3 += '    <a class ="exhibitor_text" href="//www.example.com" target="_blank">Place of Birth:</a>  <br />'; 
html3 += '   </span>'; 
html3 += '   <span id ="type_span" class="bronze">'; 
html3 += '    <span class="company_name"><h2><a href="#">Data</a></h2></span>'; 
html3 += '    <p hidden class="last-name">Data</p>  <br />'; 
html3 += '    <span ><strong></strong>&nbsp;</span><span>Lieutenant Commander</span>  <br />'; 
html3 += '    <span class="exhibitor_text"><strong>Date of Birth:</strong>&nbsp;</span><span>Feb. 2, 2338</span>  <br />'; 
html3 += '    <a class ="exhibitor_text" href="//www.example.com" target="_blank">Place of Birth:</a>  <br />'; 
html3 += '   </span>'; 
html3 += '   <span id ="type_span" class="bronze">'; 
html3 += '    <span class="company_name"><h2><a href="#">Geordi La Forge</a></h2></span>'; 
html3 += '    <p hidden class="last-name">La Forge</p>  <br />'; 
html3 += '    <span ><strong></strong>&nbsp;</span><span>Commander</span>  <br />'; 
html3 += '    <span class="exhibitor_text"><strong>Date of Birth:</strong>&nbsp;</span><span>Feb. 16, 2335</span>  <br />'; 
html3 += '    <a class ="exhibitor_text" href="//www.example.com" target="_blank">Place of Birth:</a>  <br />'; 
html3 += '   </span>'; 
html3 += '   <span id ="type_span" class="bronze">'; 
html3 += '    <span class="company_name"><h2><a href="#">Jean Luc Picard</a></h2></span>'; 
html3 += '    <p hidden class="last-name">Picard</p>  <br />'; 
html3 += '    <span ><strong></strong>&nbsp;</span><span>Captain</span>  <br />'; 
html3 += '    <span class="exhibitor_text"><strong>Date of Birth:</strong>&nbsp;</span><span>July 13, 2305</span>  <br />'; 
html3 += '    <a class ="exhibitor_text" href="//www.example.com" target="_blank">Place of Birth:</a>  <br />'; 
html3 += '   </span>'; 
html3 += '   <span id ="type_span" class="bronze">'; 
html3 += '    <span class="company_name"><h2><a href="#">William Riker</a></h2></span>'; 
html3 += '    <p hidden class="last-name">Riker</p>  <br />'; 
html3 += '    <span ><strong></strong>&nbsp;</span><span>Captain</span>  <br />'; 
html3 += '    <span class="exhibitor_text"><strong>Date of Birth:</strong>&nbsp;</span><span>August 19, 2335</span>  <br />'; 
html3 += '    <a class ="db_text" href="//www.example.com" target="_blank">Place of Birth:</a>  <br />'; 
html3 += '   </span>'; 
html3 += '   <span id ="type_span" class="bronze">'; 
html3 += '    <span class="company_name"><h2><a href="#">Deanna Troi</a></h2></span>'; 
html3 += '    <p hidden class="last-name">Troi</p>  <br />'; 
html3 += '    <span ><strong></strong>&nbsp;</span><span>Commander</span>  <br />'; 
html3 += '    <span class="exhibitor_text"><strong>Date of Birth:</strong>&nbsp;</span><span>March 29, 2336 (Terran equivalent)</span>  <br />'; 
html3 += '    <a class ="exhibitor_text" href="//www.example.com" target="_blank">Place of Birth:</a>  <br />'; 
html3 += '   </span>'; 
html3 += '   <span id ="type_span" class="bronze">'; 
html3 += '    <span class="company_name"><h2><a href="#">Worf</a></h2></span>'; 
html3 += '    <p hidden class="last-name">Worf</p>  <br />'; 
html3 += '    <span ><strong></strong>&nbsp;</span><span>Lieutenant Commander</span>  <br />'; 
html3 += '    <span class="exhibitor_text"><strong>Date of Birth:</strong>&nbsp;</span><span>December 9, 2340 (Terran equivalent)</span>  <br />'; 
html3 += '    <a class ="exhibitor_text" href="//www.example.com" target="_blank">Place of Birth:</a>  <br />'; 
html3 += '   </span>'; 

console.log(typeof(html3)); 
console.log(html3); 
$('.dbOutput').html(html3); 
}); 

這是我index.php頁

<html lang="en-US"> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script type='text/javascript' src='/js/layout.js'></script> 
    <link rel="stylesheet" href="css/style.css"> 
    <style> 
     /* Container for the alphabetical sirt */ 
     .tabContainer { 
      -moz-border-radius-topleft:0px; 
      -moz-border-radius-topright:4px; 
      -moz-border-radius-bottomright:4px; 
      -moz-border-radius-bottomleft:4px; 
      border-bottom: 10em; 
      /*color:#333;*/ 
     } 

     /* Navigation Bar for Alphabetical Sort */ 
     .listNav, 
     .ln-letters { overflow: hidden; margin: 0 auto; width: 90%; } 
     .listNavHide { display: none } 
     .listNavShow { display: list-item } 
     .letterCountShow { display: block } 
     .ln-letters a { 
      font-size: 0.9em; 
      display: block; 
      float: left; 
      width: 4%; 
      border: 0px; 
      border-right: none; 
      text-decoration: none; 
      text-align: center; 
      color: 534C3E; 
      /*background: white;*/ 
     } 
     /*.ln-letters .ln-last { border-right: 1px solid silver }*/ 
     .ln-letters a:hover,.ln-letters .ln-selected { background-color: #eaeaea } 
     .ln-letters .ln-disabled { color: #fff; text-decoration: none; } 
     .ln-letter-count { 
      position: absolute; 
      top: 0; 
      left: 0; 
      width: 20px; 
      text-align: center; 
      font-size: 0.8em; 
      line-height: 1.35; 
      color: #534C3E 
     } 
     /*# sourceMappingURL=listnav.css.map */ 
    </style> 
    <!--[if lt IE 9]> 
    <script src="js/html5shiv.js"></script> 
    <![endif]--> 
</head> 
<body> 
    <section class="contenido"> 
     <div class="envuelto"> 
      <div class="cuadrados"> 
       <div class="unidad completo"> 
        <h2>Custumers DB</h2> 
        <div class="tabContainer"><div id="demoSix" class="dbOutput" ></div></div> 
       </div> 
      </div> 
     </div> 
    </section> 
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
    <script src="js/jquery-listnav.js"></script> 
    <script src="js/vendor.js"></script> 
    <script> 
     $(function(){ 
      $('#demoSix').listnav({ 
       includeAll: true, 
       filterSelector: '.company_name', 
       includeNums: false, 
       showCounts: false, 
       noMatchText: '', 
       removeDisabled: true, 
       allText: '&infin;' 
      }); 
     }); 
    </script> 
</body> 
</html> 

如果我做我的layout.js頁以下，它就像一個魅力，見下文

圖像

console.log(typeof(html3)); 
console.log(html3); 
$('.dbOutput').html(html3); 

但是，如果我的評論之前的輸出和取消註釋以下輸出的排序選項停止工作，請參見下面

console.log(typeof(html2)); 
console.log(html2); 
$('.dbOutput').html(html2); 

圖像爲什麼它不工作相同的，如果是相同的輸出？我嘗試了不同的方法，並且我迷失了方向。這可能很簡單，但爲什麼排序選擇適用於html3輸出，而不是html2輸出。謝謝

Answer 1

問題是功能的範圍。自從我通過正確的輸出後，我不確定爲什麼會出現這種情況。我要爲插件添加function調用html代碼在js文件和固定它，這意味着增加這是`layout.js文件

html += ' <script>' + '\n'; 
html += '  $(function(){' + '\n'; 
html += '   $("#demoSix").listnav({' + '\n'; 
html += '    includeAll: true,' + '\n'; 
html += '    filterSelector: ".company_name",' + '\n'; 
html += '    includeNums: false,' + '\n'; 
html += '    showCounts: false,' + '\n'; 
html += '    noMatchText: "",' + '\n'; 
html += '    removeDisabled: true,' + '\n'; 
html += '    allText: "&infin;"' + '\n'; 
html += '   });' + '\n'; 
html += '  });' + '\n'; 
html += ' </script>'; 

因此，這是新layout.js文件

$(document).ready(function() { 
    var collection = ""; 
    var obj = []; 
    var html = ''; 
    var html2 = ''; 
    var html3 = ''; 
    $.getJSON("getDBData.php", function(data) { 
     var num = 1; 
     var json = JSON.stringify(data); 
     html += '<div class="tabContainer">' + '\n'; 
     html += '<div id="demoSix">' + '\n'; 
     /* Here I get the information from the DB. No issues here*/ 
     } 
    } 
    html += '    </div>' + '\n'; 
    html += '   </div>' + '\n'; 
    html += ' <script>' + '\n'; 
    html += '  $(function(){' + '\n'; 
    html += '   $("#demoSix").listnav({' + '\n'; 
    html += '    includeAll: true,' + '\n'; 
    html += '    filterSelector: ".company_name",' + '\n'; 
    html += '    includeNums: false,' + '\n'; 
    html += '    showCounts: false,' + '\n'; 
    html += '    noMatchText: "",' + '\n'; 
    html += '    removeDisabled: true,' + '\n'; 
    html += '    allText: "&infin;"' + '\n'; 
    html += '   });' + '\n'; 
    html += '  });' + '\n'; 
    html += ' </script>'; 
    $('.dbOutput').html(html); 
    }); 
}); 

這裏是index.php文件

<html lang="en-US"> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script type='text/javascript' src='/js/layout.js'></script> 
    <link rel="stylesheet" href="css/style.css"> 
    <style> 
     /* Container for the alphabetical sirt */ 
     .tabContainer { 
      -moz-border-radius-topleft:0px; 
      -moz-border-radius-topright:4px; 
      -moz-border-radius-bottomright:4px; 
      -moz-border-radius-bottomleft:4px; 
      border-bottom: 10em; 
      /*color:#333;*/ 
     } 

     /* Navigation Bar for Alphabetical Sort */ 
     .listNav, 
     .ln-letters { overflow: hidden; margin: 0 auto; width: 90%; } 
     .listNavHide { display: none } 
     .listNavShow { display: list-item } 
     .letterCountShow { display: block } 
     .ln-letters a { 
      font-size: 0.9em; 
      display: block; 
      float: left; 
      width: 4%; 
      border: 0px; 
      border-right: none; 
      text-decoration: none; 
      text-align: center; 
      color: 534C3E; 
      /*background: white;*/ 
     } 
     /*.ln-letters .ln-last { border-right: 1px solid silver }*/ 
     .ln-letters a:hover,.ln-letters .ln-selected { background-color: #eaeaea } 
     .ln-letters .ln-disabled { color: #fff; text-decoration: none; } 
     .ln-letter-count { 
      position: absolute; 
      top: 0; 
      left: 0; 
      width: 20px; 
      text-align: center; 
      font-size: 0.8em; 
      line-height: 1.35; 
      color: #534C3E 
     } 
     /*# sourceMappingURL=listnav.css.map */ 
    </style> 
    <!--[if lt IE 9]> 
    <script src="js/html5shiv.js"></script> 
    <![endif]--> 
</head> 
<body> 
    <section class="contenido"> 
     <div class="envuelto"> 
      <div class="cuadrados"> 
       <div class="unidad completo"> 
        <h2>Customer's DB</h2> 
        <span class="dbOutput" ></span> 
       </div> 
      </div> 
     </div> 
    </section> 
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
    <script src="js/jquery-listnav.js"></script> 
    <script src="js/vendor.js"></script> 
</body> 
</html> 

我仍然不知道爲什麼範圍爲listNav功能需要像這樣，但它的工作原理。