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

I have a web app that uses AJAX to load pages, so once the user is logged in there are no page reloads.

我有一个使用AJAX加载页面的Web应用程序,因此一旦用户登录,就没有页面重新加载。

The issue I have is that I return JS on some of the HTML pages loaded via 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
    }
});

The JS works as expected the first time the page is loaded after a hard refresh but if I go back to the page certain plugins don't work as expected. For example jQueryUI autocomplete and dialog.

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

An example of some code that might be on the HTML page returned:-

可能在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 I can't give a live example right now but I hope this is enough info for someone to point out what I am doing wrong and give me a shove in the right direction. I'm guessing its some sort of scope or overloading issue.

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

Thanks for your time.

谢谢你的时间。

2 个解决方案

#1

You should define your dialog and autocomplete outside the click function, so you can use it after you call back your page

您应该在点击功能之外定义对话框并自动完成,这样您就可以在回拨页面后使用它

#2

Without seeing your HTML it's hard to judge exactly what goes wrong, my guess is that you are overwriting the elements that you are attaching your behaviour to. Ready is only executed once when the document is ready, any changes done to elements inside the document will not be caught by $(document).ready(...);

如果没有看到您的HTML,很难确切地判断出错了什么,我的猜测是您正在覆盖您将行为附加到的元素。 Ready只在文档准备好后执行一次,对文档内部元素所做的任何更改都不会被$(document).ready(...)捕获;

You might want to create a function that sets up your behaviours within content like below:

您可能想要创建一个在内容中设置行为的函数,如下所示:

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

A quick example of what is probably your issue: https://jsfiddle.net/badguy/ykL3nvc5/

可能是您的问题的一个简单示例:https://jsfiddle.net/badguy/ykL3nvc5/

#1