如何處理動態加載的JavaScript和避免HTML碰撞

Question

過去3個小時，我一直在粉碎我的頭撞磚牆，試圖找出如何處理這個問題。

這裏就是我想：

當我按下一個viewProduct按鈕，它通過一個簡單的jQuery AJAX調用加載一個頁面產品/瀏覽/（編號），並在將其插入DIV。

這是我的主網頁（的index.php）

<script type="text/javascript"> 
$(function() { 
    $(".viewProduct").on('click', function() { 
     var productID = $(this).data('id'); 

     $.ajax({ 
      type: 'GET', 
      url: "http://mywebappurl.com/product/view/" + productID, 
      success: function(view) { 
       $("#productInfo").html(view); 
      } 
     }); 
}); 
</script> 

<button class="viewProduct" data-id="11">View Product</button> 

<div id="productInfo"></div> 

產品/視圖包含一些HTML（包括viewParentProduct）和一些JavaScript。

這裏的產品/ view.php

<script type="text/javascript"> 
$(function() { 
    // More javascript here.... 


    $("#viewParentProduct").on('click', function() { 
     var parentProductID = 15; // This number changes depending on the product and comes from PHP 

     $.ajax({ 
      type: 'GET', 
      url: "http://mywebappurl.com/order/view/" + parentProductID, 
      success: function(view) { 
       $("#parentProductInfo").html(view); 
      } 
     }); 
    }); 
</script> 

<button id="viewParentProduct">View parent product</button> 

<div id="parentProductInfo"></div> 

到目前爲止，它工作正常。動態加載的JavaScript執行完美。問題出現在父產品也有父產品時。因此，如果我按viewParentProduct，它將加載相同的頁面（產品/視圖）並將其注入dom中，並複製HTML元素和javascript。

目視：

• STAGE 1：點擊viewProduct - >產品/視圖/ 11被注射到productInfo DIV
  • STAGE 2：點擊viewParentProduct - > product/view/15被注入parentProductInfo div
    • 第3階段：點擊viewParentProduct - >產品/瀏覽/ {} someOtherParentProductID注入parentProductInfo格

在這一點上，我搞砸了。由於DOM中已經注入了相同的HTML/Javascript兩次，下一次我按viewParentProduct時，它會觸發錯誤的按鈕和/或加載錯誤的產品/視圖內容divProductInfo div。

當然，我可以做這樣的事情，但它是相當難看：

$(".viewProduct_11").on('click', ..... 

<button class="viewProduct_11" data-id="11">View Product</button> 

<div id="productInfo_11"></div> 

// Where 11 comes from PHP ex: <?php echo $productID; ?> 

所以我的問題是：有沒有辦法排序的「命名空間」一組JavaScript的HTML或你知道一種解決這個問題的方法？即使我命名空間的JavaScript，HTML元素的ID仍然會被複制。

我真的沒有想法！

-----------------------編輯--------------------- -

我需要JavaScript中的視圖（產品/視圖），因爲它是相當複雜的。實際上，這與我在這個問題中用作示例的簡單剪切沒有任何關係。我寧願在視圖本身中使用與產品/視圖頁面相關的JavaScript來提高內聚力。實際上，當點擊viewProduct按鈕時，產品/視圖頁面將以模式（帶有疊加層的div）加載，並且可以有多個模式相互重疊，其中與產品/查看。我可以通過將產品/視圖的JavaScript包裝到名稱空間中來解決JavaScript衝突問題，但HTML和DOM元素及其ID仍然存在問題。因此，爲什麼我正在尋找一種方法來命名一段JavaScript和HTML ......不知何故。我無能爲力。

Answer 1

試試這個：從主頁

的index.php

<script type="text/javascript"> 
$(function() { 
    $("body").on('click', '.viewProduct', function() { 
     var elem = $(this), 
      productID = elem.data('id'); 

     $.ajax({ 
      type: 'GET', 
      url: "http://mywebappurl.com/product/view/" + productID, 
      success: function(view) { 
       elem.next().html(view); 
      } 
     }); 
}); 
</script> 

<div class='viewWrapper'> 
<button class="viewProduct" data-id="11">View Product</button> 

<div class="productInfo"></div> 
</div> 

產品/ view.php

<div class='viewWrapper'> 
<button class="viewProduct" data-id="15">View Parent Product</button> 

<div class="productInfo"></div> 
</div> 

// Where 15 comes from PHP ex: <?php echo $productID; ?> 

的JavaScript將努力爲新加載內容。 ex .: http://jsfiddle.net/BV66Z/1/