在 AJAX 页面中加载函数答案

【问题标题】：Loading a function within an AJAX page在 AJAX 页面中加载函数
【发布时间】：2013-04-18 01:59:36
【问题描述】：

我有一个页面（OrderHistory），我们有一个“电子邮件”按钮，在选择时，在选择时执行AJAX请求并将AJAX页面（EmailForm）加载到先前的“显示：无”DIV上。我希望能够将一个函数绑定到这个 ajax 页面上的某个东西上。

我意识到我可以通过在 ajax 请求成功时绑定函数来在 orderhistory 页面上完成这项工作。但是，我们的网站都在使用同一个 ajax 页面，因此如果我可以将函数添加到 ajax 页面中，而不必编辑调用 ajax 页面的每个主机页面上的每个函数，将会节省大量时间.

我遇到的问题是没有触发该功能的事件。我无法使用 $(document).ready，因为 ajax 页面正在加载到一个 div 中，该 div 位于已经准备好的文档中。

我错过了什么吗？有没有一种简单的方法可以做到这一点？希望我说的很清楚。

提前致谢。

<script>
$(function(){
    alert('loaded')
    $('#EmailFrm_Sender').select2();
})
</script>

这是调用函数。如果我取消注释 select2 函数，它将在 ajax 页面上工作。如果我将相同的函数直接放在 ajax 页面中，它不会加载。

$(".SOEmailLink").click(function(){
  $.get('/SAM/AJAX/BalloonEmailForm.asp', {FormKey:$(this).attr('Formkey'), FormName:('SalesOrder')}, function(data){
    hr_CenterBalloon(data);/*
    $('#EmailFrm_Sender').select2();*/
  })
});

这是简单的代码。正如我在 cmets 中所说，如果我自己运行此页面（使用适当的插件链接和 jquery 文件），函数会绑定并触发警报。

【问题讨论】：

你知道AJAX加载页面中要绑定事件的元素吗？
您可以在电子邮件表单中的<script>（没有 $(document).ready 或类似的东西）中轻松编写绑定脚本，然后在电子邮件表单加载到隐藏的 div 时执行.
在emailform 的末尾，您可以在绑定事件的位置添加script。可能您必须使用timeout 进行事件注册，以便在执行脚本时元素在 dom 中正确更新
试试这个示例plnkr.co/edit/Lr3OFBpl6ebRv5C4YeLo?p=preview
@user2287595 您使用的.load 版本仅将结果页面的一部分加载到DOM 中，还是加载整个页面？前一个变体去掉了<script> 标签。

标签： jquery ajax

【解决方案1】：

如果您使用的是 jQuery，$.ajax 函数有一个成功回调，您可以使用它来调用类似的函数。

【讨论】：

【解决方案2】：

不需要事件来触发该功能。只需在 HTML sn-p 的 <script> 标记内直接调用函数本身即可：

<div id="EmailFrm_Sender">
    your form content
</div>
<script>
    // common functions defined here
    ...

    // and then invoke stuff that needs to be run now
    $('#EmailFrm_Sender').select2();
</script>

【讨论】：

【解决方案3】：

您的电子邮件表单文件：

<script>
    $(function() {
      alert('LOADED!!!');
    });
</script>
<div>
<!-- form -->
</div>

【讨论】：