jQuery - 如何让jQuery在使用jQuery加载远程页面后正常运行？

问题描述：

jQuery在当前页面上工作。jQuery - 如何让jQuery在使用jQuery加载远程页面后正常运行？

<div class="row-fluid"> 
    <ul class="nav nav-tabs"> 
     <li><a data-toggle="tab" id="spotlight" href="#" data-hvalue="menu1">menu1</a></li> 
     <li><a data-toggle="tab" id="spotlight" href="#" data-hvalue="menu2">menu2</a></li> 
    </ul> 
</div> 
<div class="showroom" id="showroom"></div> 
    <script> 
     $('a#spotlight').click(function() { 
     $(this).each(function(){ 
      if($(this).data('hvalue')=="menu1"){ 
       $.getScript("http://calebevans.me/projects/jcanvas/resources/jcanvas/jcanvas.min.js", function() { 
        alert('Load was performed.'); 
       }); 
      } 
      var temp = $(this).data('hvalue') + " #page"; 
      $('#showroom').load(temp); 
     }); 
    }); 
    </div> 
</script>

远程页面下面的代码：

<div class="container-fluid" id="page"> 
    <div class="row-fluid"> 
     <button id="DrawItem">Draw Item</button> 
     <div id="canvases"> 
      <canvas width="640" height="480"></canvas> 
     </div> 
    </div> 
</div>

起初，我把这个片段中远程

我使用加载远程页面到一个div在我的当前页面页： $（文件）。就绪（函数（）{ $（ 'A＃DRAWITEM'）点击（函数（）{$ （ “画布”）drawArc（{ 填充样式： “黑”， x：100，y：100, radius：50 }）; }）; }）; 但它不会工作。我把canvas和jcanvas.min.js脚本放在同一个页面中，一切正常。如果我尝试从远程页面加载画布，它将无法工作。

首先，你必须重复的ID在那里。其次，你的'.js'文件包含HTML？ – CodingIntrigue

如果您打算将它们与$ .each（）一起使用，您可以使用重复的ID。例如，在菜单结构中。这使您可以重新使用代码/函数，而不是为每个菜单项构建新的函数。我的.js文件只是一个.js文件。我正在从一个远程页面加载一个div，其中包含javascript。如果使用远程页面加载JavaScript，则JavaScript不起作用。 – CIA

尽管事实上你可能会逃避，但你确实不应该有重复的ID。 ID *应该是唯一的 - 并不是所有的浏览器都能像你所见过的那么好玩。如果你想识别元素的集合，它应该是按类，容器和类型或其他数据属性，但不能通过重复的ID。 – Archer

答

当您尝试时，您不能将事件处理程序分配给元素，因为它当时不存在。相反，你可以将它连接到这样的容器元素...

$(document).ready(function() { 
    $("#showroom").on("click", "#DrawItem", function(){ 
     $("canvas").drawArc({ 
      fillStyle: "black", 
      x: 100, y: 100, 
      radius: 50 
     }); 
    }); 
});

，将捕获的#showroom点击事件和火灾事件处理程序，如果点击源自#DrawItem。这是事件委托，你可以阅读更多关于它在这里...

http://api.jquery.com/on/

谢谢！这从主页面运行。任何想法，为什么它不会工作，如果它在远程页面被加载？ – CIA

我假设在远程页面上没有名为'＃showroom'的元素，所以没有要附加事件处理程序的元素。您可以将它改为'$（document）'。将处理程序附加到最近的静态元素上会更好。 – Archer

jQuery - 如何让jQuery在使用jQuery加载远程页面后正常运行？

相关推荐