抓取已從AJAX調用“回波”到PHP的div的html

Question

我正在嘗試從服務器加載下拉菜單，然后使用jQuery與該下拉菜單進行交互。 一切正常，但是我無法與菜單項進行交互，因為它們不是已加載的原始HTML的一部分，它們是在AJAX得到響應后輸入的。

這是ajax代碼：

$(document).ready(function(){
    //load dropdown menu using ajax

    $.ajax({ url: "default/CallSupplierMongo",
        context: document.body,
        success: function (res) {
            document.getElementById("dropdownItems").innerHTML = res;
        }
    });

});

jQuery：

$(document).load(function() {
  $('.dropdownItems > div').click(function () {
        supplierCode = $(this).html();

        $('.dropdownItems > div').css({
            'background-color': 'white',
            'color': '#888888'
        });

        $(this).css({
            'background-color': '#888888',
            'color': 'white'
        });

        $('.dropdownItems').slideUp('fast');

        $('.dropdownButton').html(supplierCode);
        $('.dropdownButton').css({
            'border-bottom-right-radius': '5px',
            'border-bottom-left-radius': '5px'
        })
    });

});

和PHP：

function actionCallSupplierMongo() {
        self::getSuppliers();
}

private static function echoSupplierCodes($supplierCodes) {

    for ($i=0;$i<count($supplierCodes);++$i) {
        echo '<div>'.$supplierCodes[$i].'</div>';
    }

}

為了進一步解釋該問題：我想單擊下拉菜單項並獲取其中的HTML。 當我單擊時，未注冊任何內容。 我相信這是因為jQuery在加載<div>之前先檢查它們是否存在，因此不對它們應用.click函數。

編輯我試過將AJAX調用放在$(document).load()但是它仍然沒有效果。

Answer 1

問題：最初加載頁面時，JS代碼將事件（例如click() ）附加到當前在DOM上的元素上，但是當您通過AJAX將新元素加載到DOM上時，這些新元素沒有任何綁定到它們的事件。 因此，JS中的事件不起作用。

解決方案：您需要委派事件處理程序。

更改此：

$('.dropdownItems > div').click(function () {

對此：

$(document).on('click', '.dropdownItems > div', function () {

資料來源： http ： //api.jquery.com/delegate/

Answer 2

問題是您要將click事件處理程序附加到尚不存在的項目上。

您應該使用jQuery的事件委托 ，例如：

$('.dropdownItems').on('click', '> div', function () {

---

注意：如果由於某種原因，您不想使用事件委托，而是希望將事件附加到元素本身，則必須將已有的ready代碼放入函數中，而不是在以下情況下調用函數：該頁面已准備就緒，您必須在修改集合時隨時調用它。

Answer 3

$('.dropdownItems > div').click(function () {

替換為

$(document).on('click', '.dropdownItems > div', function() {

Answer 4

答案是在AJAX調用成功響應后調用該函數。

$.ajax({ url: "default/CallSupplierMongo",
    context: document.body,
    success: function (res) {
        document.getElementById("dropdownItems").innerHTML = res;

        loadDropdownFunctions();
    }
});


function loadDropdownFunctions() {

$('.dropdownItems > div').click(function () {
    supplierCode = $(this).html();

    $('.dropdownItems > div').css({
        'background-color': 'white',
        'color': '#888888'
    });

    $(this).css({
        'background-color': '#888888',
        'color': 'white'
    });

    $('.dropdownItems').slideUp('fast');

    $('.dropdownButton').html(supplierCode);
    $('.dropdownButton').css({
        'border-bottom-right-radius': '5px',
        'border-bottom-left-radius': '5px'
    })
});