时间戳

首页 > 解决方案 > Jquery 选择器不适用于使用 ajax 加载的元素

jquery - Jquery 选择器不适用于使用 ajax 加载的元素

问题描述

我正在尝试使用 ajax 从 php 脚本中加载一些内容，并在单击加载的元素时执行一些功能

<div class="f-screen" id="fff"><div class="row">
            <div style="width: 230px;margin-right: 4.1%; margin-left: 1%">
                <center><a href="#"><h5>' . $row["name"] . '</h5>
                <img src="' . $row["avatar"] . '" class="profile-pic" style="width: 141px;"></a><br>
                <hr> ....

但是当我尝试在加载的元素上使用元素选择器时，似乎什么也没发生，这是我的 jquery 代码

$(document).ready(function(){
$("#fff").click(function(){
    console.log("button clicked");
});

});

当我选择一个已经放在我的 html 文件中的元素但它在加载的元素上不起作用时，相同的 jquery 代码工作正常

标签： jqueryhtml

解决方案

这里的基本问题是您将click处理程序分配给尚不存在的元素。您需要使用事件委托。

在这种情况下，请尝试使用 jQueryon方法：

http://api.jquery.com/on/

$(document).ready(function(){
    $(document).on('click', '#fff', function(){
        console.log("button clicked");
    });
});

此方法为document（始终存在）分配一个侦听器，然后将处理程序与元素匹配#FFF。

推荐阅读