当页面加载后调用数据时,Jquery函数不工作


jquery functions not working when data called after page load

我要问的问题可能不太可能,我会尽量说清楚。

我设置了我的网站,所以只有一个实际的网页(index.php)。所有的html和页面内容都存储在php脚本中。因此,我只是根据他们想要查看的页面发布数据,并在我的页面模板中使用.html()。一切都很好,正如我所愿。

问题是,任何jquery函数使用元素标签是在html,我从服务器调用和渲染页面加载后不再工作。我不太确定为什么会这样。jquery是否将页面加载时的所有页面元素都呈现到内存中,从而不考虑在页面加载后添加的id和类?

任何见解,或不同的方法来做到这一点,将不胜感激。

提前感谢!

听起来你可以使用。delegate(),它比。live()有更多的好处

http://api.jquery.com/delegate

允许你在页面加载和之后创建的元素上附加事件这就是你用。html()做的事情

你所做的任何事情都不是事件绑定,你应该在每次替换页面上的东西后运行所有的jquery东西。不仅仅是页面加载。

将所有这些放入一个函数中,以便您可以轻松调用它。

这是您的解决方案

http://api.jquery.com/live/

加载dom后添加的任何内容都应该使用live或delegate

我不确定您是否确定了您所遇到的确切问题。这里可能有两个问题,分层来创造你的印象:

1) jQuery .bind()和它的快捷函数,如。click(),。hover()等,在它们被调用时绑定,而不是像CSS规则那样连续绑定。

例如:

$(document).ready(function() {
    $('div.stuff').click(function(){alert('Hi');}
});
<div class=stuff>Say hi</div>

在页面首次加载后插入到文档中的新HTML将不起作用,因为$(document).ready()在body标签关闭/jQuery完成初始化时(以第二个为准)触发,并且在加载新HTML时不会再次触发。

一个天真的答案是使用。live()
$('div.stuff').live('click', function(){alert('Hi');}

这将导致加载到页面中的新HTML在包含class内容的div时触发,因为jQuery会监听body标签上的实时事件,然后匹配触发事件的标签,看看它是否匹配选择器。第二步的开销有点大,而且如果有很多实时选择器,您的页面对事件的响应速度会很慢。这是不好的。

更好的答案是加载新的HTML,然后绑定。也许像这样:

function pageBinds() {
    $('div.stuff').click(function(){alert('Hi');}
}
$(document).ready(pageBinds);
function loadPage() {
    $.ajax(...)
    pageBinds();
}

这让你的性能绑定响应加载的内容。

您可能会考虑在加载新内容之前取消绑定,因为根据事件和浏览器的不同,保留现有事件绑定可能会污染jQuery,但这需要大量事件和大量页面加载才能对桌面产生重大影响(智能手机可能会感觉快一点)。不过,解绑定会更复杂。

2) innerHTML内容中的脚本标签将被忽略。

这使许多ASP感到困惑。Net程序员使用UpdatePanels,它做的正是您在PHP中编写的代码。您加载的页面中的任何脚本标签都可能不存在-浏览器只是丢弃它们。为了在HTML中运行脚本,您需要使用eval()或其他一些更复杂的技巧显式地执行它。

你可以通过加载任何内容作为脚本分隔符html来解决这个问题。因此,您使用分隔符字符序列,让您构建的AJAX调用使用.split()分隔传入字符串,eval脚本部分,并innerHTML HTML