抓取已从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'
    })
});