通过 AJAX 链接加载时 Jquery Document.ready答案

【问题标题】：Jquery Document.ready when loaded through AJAX links通过 AJAX 链接加载时 Jquery Document.ready
【发布时间】：2014-04-05 04:56:28
【问题描述】：

我是新来的，所以请原谅任何初学者的错误。

我正在学习 jQuery (v1.9.1) 以及使用 jQuery Mobile (v1.3.1)。我在使用 AJAX 链接和 javascript 时遇到两个问题：

1) 当我通过 jqm 提供的默认 AJAX 链接方法链接页面时，我无法在后续页面上运行任何新加载的 javascript。即当我从 page1.php 转到 page2.php 时，我可以执行 javascript 即类似于以下内容（此代码在 page2.php 中）：

<script>
$(document).ready(function(){
    $('#form_field_email').focus();
});

</script>

在这里浏览了一堆问题后，我相信这是因为在初始页面加载后没有评估新脚本。因此，我尝试将我的所有代码移动到我在 page1.php 上加载的 .js 文件中。但有时我想在页面加载时触发操作（如上所述）。

有没有什么方法可以在不使用 eval 函数的情况下实现这一点？

2) 同样，如果 page1.php 上的一个 DIV 的 id 是“messageBox”，但如果我在 page2.php 上为另一个 DIV 使用相同的 id，我将失去控制新绘制的 DIV 的能力在 page2 上，因为 javascript 仍然指向不再可见的旧 DIV。

$('#messageBox').show();

有没有办法使用相同的名称但仍然能够指向当前页面上的元素。

感谢您的帮助。

【问题讨论】：

文档中不应该有两个元素具有相同的id。如果您要从新页面添加元素而不是从 DOM 中删除旧元素，那么您应该选择一个新的id。
另外，document.ready 事件只触发一次，它发生在浏览器完成页面渲染之后。您应该查看 jquery mobile 的文档，并且肯定会有一种方法可以使用回调或通过 Promise 传递成功函数。一旦 ajax 导航完成，就会执行该成功函数。
使用单页模式时，应将其他页面的任何JS放在data-role="page" div中。 Ajax 仅加载该 div 并忽略其中的任何其他内容（头部和正文中的其他元素）。
这里是jQM特别活动stackoverflow.com/questions/20457195/…987654321@的简化说明

【解决方案1】：

您应该做的是将需要在 ajax 加载后运行的代码放入 ajax 调用的成功回调中。

$.ajax({
  url: 'http://example.com',
  success: function() {
    //do something when call completes successfully
  }
);

【讨论】：