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's event delegation，例如：

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

抓住已被回应的div的html＆＃39;从AJAX调用到PHP

4 个答案: