Question

我有一个带有表单和一些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（）定义，我在其中调用脚本。

Answer 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
        });
    }

});

Answer 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(...)"

Answer 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，这可能是可接受的吗？

Answer 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;}

Answer 5

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

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

5 个答案: