如何处理动态加载的javascript并避免HTML冲突
在过去的三个小时里，我一直在用砖墙砸我的头，想办法解决这个问题。
，这是我想要做的：
当我按下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，它会加载相同的页面(product/view)，并将其注入dom中，复制HTML和javascript。
视觉：
- 阶段1:单击viewProduct -> product/view/11注入productInfo div
- viewParentProduct -->产品/视图/15被注入parentProductInfo div 中
- viewParentProduct ->产品/视图/{someOtherParentProductID}被注入到parentProductInfo div中
- viewParentProduct -->产品/视图/15被注入parentProductInfo div 中
现在我完蛋了。由于相同的HTML/Javascript已经在DOM中注入了两次，所以下次按viewParentProduct，时，它将触发错误的按钮和/或在错误的parentProductInfo 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元素的if仍然会被复制。
我真的没什么主意了！
-----------------------EDIT-----------------------
我需要在视图(产品/视图)中包含javascript，因为它相当复杂。事实上，这与我在这个问题中用作示例的简单片段无关。我更希望视图本身包含与产品/视图页面相关的javascript，以提高内聚力。实际上，当单击viewProduct按钮时，产品/视图页面将加载到一个模式中(一个带有覆盖层的div )，并且可以与相互重叠多个模式--来自产品/视图的相同的HTML/javascript代码。我可以通过将产品/视图的javascript包装在名称空间中来解决javascript冲突，但是HTML和DOM元素及其ID仍然存在问题。因此，我要寻找一种命名空间的方法--一个javascript和HTML...somehow块。我太笨了。
回答 1
Stack Overflow用户
发布于 2014-02-27 20:30:45
试试这个：
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>product/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将用于处理新加载的内容。例：http://jsfiddle.net/BV66Z/1/
https://stackoverflow.com/questions/22078014
复制相似问题
腾讯云开发者
