運行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調用返回

回答

相關問題