Question

我能够成功地将名为test.html的页面中的内容加载到名为page.htm的页面中，其中包含：

$(document).ready(function(){ 
     $("#reveal").load("test.html");
});

我在page.htm中放了一个名为#reveal的空div，内容加载 - 没问题。

在test.html中，我有两个div类指定了文章标题和文章内容，其中包含类：.artTitle和.artContent。在page.html的css文件中，我显示：隐藏.artContent - 所有显示的内容都是.artTitles。然后我想通过切换点击显示.artContents。

我能够让这个jQuery进程在内联工作（在同一页面中）但在加载html时会中断。加载时我遇到的问题是什么 - （非常绿色的新手）？

Answer 1

这是切换功能，可能是罪魁祸首，而不是负载功能。您有可能绑定到在内容加载之前不存在的元素。您需要使用on()的委托语法将侦听器绑定到#reveal或其他祖先。

Answer 2

好吧，我不是jQuery的专家。事实上，我来到这里希望得到一个基本相同问题的明确答案。已经给出的答案有助于我指出正确的方向......这是我的解决方案......

我假设你有一些jquery函数看起来像是

 $('.trigger').click(function() { $('.artContents').toggle(); });

通过.load（）加载的HTML包含要点击的.trigger，它将切换.artContents，是吗？尝试，

$(document).on('click','.trigger', function() { $('.artContents').toggle(); });

我真的希望有所帮助。我和你一起在“非常绿色的新手”营地，但这对我有用。我无法解释为什么它有效。也许其他人可以。

Answer 3

您需要使用如下的直播活动：

$('body').on('click', '.artTitles', function() { // binding live click to upcoming elements
   var self = this; // keeping reference to clicked title, because this will not catch into the hide callback function due to different scope
   $('.artContents:visible').hide( // hiding visible contents
    function() { // callback function
      $(self).closest('.artContents').show(300); // show content corresponding to title
   });
});

jQuery函数打破了.load

3 个答案: