抓取已经'回声'从AJAX调用到PHP

Grabbing html of div that has been 'echoed' from AJAX call to PHP

本文关键字：调用 PHP AJAX 抓取 回声      更新时间：2023-09-26

我正试图从服务器加载一个下拉菜单，然后使用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函数。

EDIT我尝试过将AJAX调用放在$(document).load()中，但仍然没有效果。

问题：当您最初加载页面时，JS代码会将事件(如click()(附加到当前DOM上的元素，但当您通过AJAX将新元素加载到DOM时，这些新元素不会绑定任何事件。因此JS中的事件不起作用。

解决方案：您需要委托事件处理程序。

更改此项：

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

对此：

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

来源：http://api.jquery.com/delegate/

问题是您正在将click事件处理程序附加到尚不存在的项。

您应该使用jQuery的事件委派，例如：

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

注意：如果出于某种原因，您不想使用事件委派，而是希望将事件附加到元素本身，则必须将ready的代码放入函数中，并且必须在修改集合时随时调用该函数，而不是在页面准备就绪时调用该函数。

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

将其替换为

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

答案是在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'
    })
});
相关文章：