Question

我有一个使用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>

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

感谢您的时间。

Answer 1

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

Answer 2

如果没有看到您的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/

通过AJAX调用

2 个答案: