运行JavaScript（并调用jQuery插件）通过AJAX调用返回

我有一个使用AJAX加载页面的Web应用程序，所以一旦用户登录，就没有页面重新加载。运行JavaScript（并调用jQuery插件）通过AJAX调用返回

我遇到的问题是，我通过AJAX加载的一些HTML页面上返回JS。

$.ajax({ 
    url: url, 
    type: 'GET', 
    dataType: 'html', 
    success: function(data) { 
     $('#content .wrapper').html(data); 
    }, 
    error: function(jqXHR, textStatus, errorThrown) { 
     //throw error 
    } 
});

JS按预期的方式在硬刷新后第一次加载页面，但如果我返回页面，某些插件无法按预期工作。例如jQueryUI自动完成和对话框。

的一些代码，可能是在HTML页面上的一个例子返回： -

<script type="text/javascript"> 

$(document).ready(function() { 

    $('#add-recipients-button').click(function() { 

     $("#add-recipients").dialog({ 
      modal: true, 
      title: "Add Recipients", 
      width: 400, 
      open: function(event, ui) { 
       $('#customer').val(''); 
       $("#customer-select").autocomplete({ 
        source: 'somescript.php', 
        minLength: 2, 
        select: function (event, ui) { 
         $("#customer").val(ui.item.id); 
        } 
       }); 
      }, 
      close: function(event, ui) { 
       $("#customer-select").autocomplete("destroy"); 
      } 
     }); 

    }); 

}); 

</script>

Unfortunalty我不能给一个活生生的例子，但现在我希望这是足够的信息有人指出什么我做错了，并朝正确的方向推动我。我猜测它的某种范围或超载问题。

谢谢你的时间。

来源

2016-01-29 pjknight

脚本的顺序VS Ajax的加载HTML页面很重要。主页面已经出现'document.ready' – charlietfl

你应该定义你的点击功能之外对话和自动完成，让你再打你的页面

来源

2016-01-29 16:49:51

没有看到你的HTML很难判断到底是什么出了问题后，您可以使用它，我的猜测是，你是覆盖您将您的行为附加到的元素。 Ready只在文档准备就绪时执行一次，对文档中的元素所做的任何更改都不会被$（document）.ready（...）捕获;

您可能希望创建一个类似下面设置中的内容您的行为的函数：

var enableRecipientsButtonBehaviour = function() { 
    $('#add-recipients-button').click(function() { 

     $("#add-recipients").dialog({ 
      modal: true, 
      title: "Add Recipients", 
      width: 400, 
      open: function(event, ui) { 
       $('#customer').val(''); 
       $("#customer-select").autocomplete({ 
        source: 'somescript.php', 
        minLength: 2, 
        select: function (event, ui) { 
         $("#customer").val(ui.item.id); 
        } 
       }); 
      }, 
      close: function(event, ui) { 
       $("#customer-select").autocomplete("destroy"); 
      } 
     }); 

    }); 
} 

$(documnent).ready(function() { 
    [..] 
    enableRecipientsButtonBehaviour(); 
} 

[..] 

$.ajax({ 
    success: function() { 
    // Rewrite Content HTML 
    enableRecipientsButtonBehaviour(); 
}

的东西可能是你的问题，一个简单的例子：https://jsfiddle.net/badguy/ykL3nvc5/

来源

2016-01-29 17:03:46 AlexR

运行JavaScript（并调用jQuery插件）通过AJAX调用返回

回答

相关问题