ajax 调用后 jquery 不起作用（在弹出窗口中响应）答案

【问题标题】：jquery doesn't work after an ajax call (response in a pop up window)ajax 调用后 jquery 不起作用（在弹出窗口中响应）
【发布时间】：2014-01-15 11:59:52
【问题描述】：

我有一个带有表单和一些 jquery 代码的 jsp 页面。 Jquery 代码运行良好，但如果我通过使用 ajax 调用在弹出窗口中返回该页面，则 jquery 代码不再工作。

我也尝试过使用委托，即：

  $('select[name=myElementName]').on("change", function() {
        // some code
});

  or

  $(document).on("change", 'select[name=myElementName]', function() {
        // some code
});

而不是

 $('select[name=myElementName]').change(function() {    
             // some code
    });

Ajax 调用：

  var preview = function () {           
    $.ajax({
       type: "POST",
       url: myAction.do,
       data: "id=" + myid,
   success: function (response) {  
    // some code
    var x=window.open('', '_blank', 'titlebar=no,scrollbars=yes,menubar=no,height='+height+',width='+width+',resizable=yes,toolbar=no,location=no,location=0,status=no,left='+left+',top='+top+'');
    x.document.open();
    x.focus();
    x.document.write(response);

    return false;
    },
    error: function () {  
        return false;
    },
  });           
 };

编辑

在 Firefox 26.0 和 Chrome 32.0.x 上，我通过使用解决了

 x.document.close();

之后

x.document.write(replace);

相反，在 IE 上，所有 .js 包含的脚本都会被忽略（例如 jquery-ui-1.9.1.js）。

编辑 2

我解决了

  <body onload="myload()">

在我的 jsp 中我有 myload() 定义，我在其中调用脚本。

【问题讨论】：

Jquery function doesn't work after Ajax call 的可能重复项
-Infinity 没有评论。
我不知道您是在尝试在打开的页面还是在您发出请求的页面上运行 .on('change'... 事件侦听器。请澄清。
@Brian Noah 在新打开的页面上

标签： javascript jquery ajax popupwindow

【解决方案1】：

这是因为您正在创建新的 DOM 结构，但它没有附加事件处理程序。最简单的方法是在 ajax 回调中运行事件处理程序：

$.ajax({

    ...
    success: function (response) {  
        // some code
        var x=window.open('', '_blank', 'titlebar=no,scrollbars=yes,menubar=no,height='+height+',width='+width+',resizable=yes,toolbar=no,location=no,location=0,status=no,left='+left+',top='+top+'');
        x.document.open();
        x.focus();
        x.document.write(response);

        // now, place the event handler here
        $('select[name=myElementName]', x.document.body).change(function() {    
                     // some code
        });
    }

});

【讨论】：

但对于外部 .js？
@cricket 外部 .js 是什么意思？也许您需要更详细地说明问题中的示例？
@cricket 如果您需要调用一些外部 js 功能来安装处理程序，然后在 ajax success 回调中进行。
在这种情况下，响应是整个 HTML 页面。在那个页面中，我包含了日期选择器的 .js。 Firefox 和 Chrome 识别它，但不是 ie。在 ie 上，我不得不将其他脚本放在页面加载时调用的函数中，但我不知道如何处理包含的脚本。
@Cricket 1) 然后再从success 回调中调用这些脚本。这是你必须做的。 2）我在答案中写的内容有助于您演示的代码。看来您现在正在谈论其他事情。除非你清楚地证明你做了什么以及你的问题是什么，否则没有人能够真正帮助你解决你的实际问题，你的赏金将付诸东流。

【解决方案2】：

不要使用document.write，它会完全覆盖撰写本文时页面上的所有内容并导致竞争条件（例如，外部脚本可能已经加载，但也可能没有，导致未知顺序write 和脚本加载）。另外，我相信documnt.write 将序列化文本放入文档，而不是 DOM 对象，因此它可能不会触发事件。

相反，您可以打开新窗口，然后直接在其中操作 DOM 对象（假设它与您的主页位于同一台服务器上）：

//Open a new window for the success info
var newWindow = window.open(newUrl);

//Now grab some element
var someItem = newWindow.document.getElementById( "someId");

//Manipulate dom either by "someItem.innerHTML" or "someItem.appendChild(...)"

【讨论】：

我不明白如何在整个 html 页面响应上使用 document.onload，而不是 document.write，然后将其添加到 DOM。你有关于它的例子或链接吗？
@Cricket 最简单的方法是将代码放在您正在加载的页面中的框架中（这必须与外部页面位于同一服务器上）告诉外部已加载的页面。 iframe 将通过调用父级中的 javascript 函数来执行此操作：parent.iframeLoaded();。在 iframeLoaded 中，您可以使用常规 javascript 或 jQuery 添加元素或更改 iframe 的现有元素，如下所示：$("#myiframe").contents().append( "<p>Test</p>" );。
我不（也不会）使用 iframe。我有一个对返回 html 页面的 java Action 的 ajax 调用（基本上它是一个带有一些查询代码并包含一些外部 .js 的预览表单）。所有作品，但在 IE 上，外部 .js 被忽略。
@Cricket 这样更容易！（对不起 iFrame，我误读了你在做什么）。再次，远离 document.write，而是做我上面显示的事情（我编辑了我的答案）

【解决方案3】：

如果您正在调用 AJAX 服务器例程并将整个响应（无需在客户端进行处理）放入新窗口，为什么不直接使用该 AJAX 例程的 URL 打开窗口并跳过所有内容：

....
var x=window.open(myAction.do + "?id=" + myid, 
 '_blank', 
 'titlebar=no,scrollbars=yes,menubar=no,height='+height+',width='+width+',resizable=yes,toolbar=no,location=no,location=0,status=no,left='+left+',top='+top+'');
....

这里唯一的区别是，请求是 GET 而不是 POST 请求，但数据只是一个 id，这可能是可以接受的吗？

【讨论】：

我从 jquery 插件调用 ajax，它从 jsp 获取 url。我无法直接打开窗口
如果您可以将 url 传递给 AJAX 调用，您也可以将其传递给任何其他 javascript 函数。

【解决方案4】：

我在我的项目中遇到了类似的问题。我在ajax调用后写了一个成功方法解决了。

            {
             $.ajax({
              type: "POST",
              url: "/abc/",
              data:{<data>},
              async:false,
              dataType:'json',
              success: function(response)                   
              {
                success=1;
                Id=response;
                  return;
              }
        });
        if (success)
        {
                #your code here
                var a='/xyz/?Id='+Id
                window.open(a,'_blank');
                window.location.href='/registration/'
        }
        return false;}

【讨论】：

【解决方案5】：

不要使用 document.write，而是尝试在隐藏的 DIV 中获取您的成功数据（到达成功函数的记录）并将其克隆到应该可以工作的弹出窗口中

【讨论】：