javascript - 从 AJAX 调用 PHP 获取 'echoed' 的 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> s 在加载之前就存在，因此不应用 .click对他们起作用。

编辑我尝试将 AJAX 调用放入 $(document).load()但还是没有效果。

Answer 1

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

解决方案: 您需要委托(delegate)事件处理程序。

更改此:

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

对此:

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

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