我如何加载外部 html 并使其与 jquery 一起使用答案

【问题标题】：how can i load an external html and make it work with jquery我如何加载外部 html 并使其与 jquery 一起使用
【发布时间】：2015-07-24 15:56:25
【问题描述】：

我想使用load 将外部html 加载到我的实际html 中，但不是由click 触发。我想将它加载到文档ready 事件的页面上。我确实喜欢这个，但 jquery 不适用于加载的内容。

<script>
$(document).ready(function(){ 

     $( "#rezervations" ).load("http://websoftit.ro/wayoutz/calendar.php");

});
</script>

我的意思是内容已加载，但主文档中的 jquery 不适用于加载的内容。适用于加载内容的脚本示例

<script>
 $(".table").on("click", "td", function() {
     $(this).closest("tr").siblings().removeClass("td_select");
    $(this).toggleClass("td_select");
   });

</script>

【问题讨论】：

工作正常here。有什么问题？？
它会加载它，但 jquery 脚本不适用于加载的内容

标签： javascript jquery ajax html dom

【解决方案1】：

我已经检查过了，你的代码没有问题，它工作正常只需检查你是否有特定的 div id rezervations。

$(document).ready(function(){ 
    $( "#rezervations" ).load("http://websoftit.ro/wayoutz/calendar.php");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="rezervations">HELLO</div>

问候

【讨论】：

它可以工作，它会加载内容，但 jquery 脚本不适合它。例如，这应该适用于加载的内容：<script> $(".table").on("click", "td", function() { $(this).closest("tr").siblings().removeClass("td_select"); $(this).toggleClass("td_select"); }); </script>

【解决方案2】：

好的，那么你可能需要写成如下：

$( "#rezervations" ).load("http://websoftit.ro/wayoutz/calendar.php",function(){
       $(".table").on("click", "td", function() {      
             $(this).closest("tr").siblings().removeClass("td_select"); 
             $(this).toggleClass("td_select"); 
       });
     //Your other initialization here
});

【讨论】：

【解决方案3】：

加载标题的示例：

$(document).ready( function(){
$("header").load("http://localhost/js/header.html", function() {
    $('body').trigger('headerReady');
});
});

来自api：https://api.jquery.com/trigger/，然后

$('body').on('headerReady', function(){
//do ur stuff here 
});

【讨论】：