使用 jQuery 加载 AJAX 后无法添加事件答案

【问题标题】：Unable to add events after AJAX load using jQuery使用 jQuery 加载 AJAX 后无法添加事件
【发布时间】：2023-04-03 04:33:01
【问题描述】：

我有一个网页，我使用 jQuery 的 AJAX 将新元素加载到 div 中。我页面的这部分工作正常。

我现在想为这些新添加的元素添加一个类似的事件。为此，我计划使用 jQuery 的 .live() 方法，但似乎什么也没发生。

所以我一开始就从这个开始

<div id="change-agent-list" class="tooltip">
    <div class="top"></div>
    <div class="middle"></div>
    <div class="bottom"></div>
</div>

在 .middle 中，我异步加载如下所示的标记：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title></title>
</head>
<body>
    <form name="main" method="post" action="/ils/agent-selector/" id="main">
        <div>
            <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTQ1MTc3ODM4NGRkg9mLyLiGNVcP/ppO9C/IbwpxdwI=" />
        </div>
        <ul id="content_0_agentsUL">
            <li>
                <a href="/agent-details/?ag={BF505982-DF16-4D09-BFE4-2ADDCADCC8E4}" class="agent-name link">Agent 1</a>
            </li>
            <li>
                <a href="/agent-details/?ag={42F1AE01-59F4-43DE-98C7-A1F99DB3A33C}" class="agent-name link">Agent 2</a>
            </li>
            <li>
                <a href="/agent-details/?ag={B3139686-12DA-44A1-A597-E05E1DD08007}" class="agent-name link">Agent 3</a>
            </li>
        </ul>
        <div id="agent-details"></div>
    </form>
</body>
</html>

当页面最初加载时，我使用这个脚本 - 我的目的是为以后异步添加的每个 .agent-name 元素添加一个点击处理程序。

$j(document).ready(function () {
    $j(".agent-name").live("click", function() {
        var agentDetails = $j(".agent-details");
        var loadingContent = '<div id="ajax-load"><img src="/sitecore/__/_images/global/ajax-load.gif" alt="AJAX content loading" /></div>';

       agentDetails.show();

        agentDetails.empty().html(loadingContent);
        var modalURL = $j(".agent-name").attr("href");
        agentDetails.load(modalURL);*/

        return false;
    });
});

问题是没有事件绑定到 .agent-name 元素。我尝试用一个简单的 alert() 替换所有内部脚本，以便我可以查看是否有任何事件绑定到 .agent-name 元素，并且我无法显示此 alert()。

也就是说，没有事件绑定到我的 .agent-name 元素。

即使我将 agent-name 类移动到列表元素并将 jQuery 更改为简单

$j(".agent-name").live("click", function() {
    alert('1');
});

当我点击元素时，我仍然什么也得不到。

谁能解释为什么，或者我如何解决这个问题，以便我可以将事件后期绑定到在 AJAX 回调中创建的元素？

【问题讨论】：

标签： ajax dom jquery dynamic-rebinding

【解决方案1】：

我最终通过使用 jQuery 的 on 而不是“live”解决了这个问题。

【讨论】：

【解决方案2】：

您只能拥有一个#agent-name，因为 ID 是唯一的。你可以只使用$('#agents .link')，因为你已经在每个锚点上都有一个类。

【讨论】：

当然，这是我在编辑这篇文章时打错的。我的实际网页将它们作为类，我现在已经编辑了上面的帖子以正确显示这一点。
我已经编辑了原始帖子以显示从 AJAX .load() 请求返回的完整标记。

【解决方案3】：

不确定这是否有帮助，但这对我有用：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
        $(".agent-name").live("click", function() {
            alert("click");
            return false;
        });
    });
    </script>
</head>
<body>
    <form name="main" method="post" action="/ils/agent-selector/" id="main">
        <div>
            <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTQ1MTc3ODM4NGRkg9mLyLiGNVcP/ppO9C/IbwpxdwI=" />
        </div>
        <ul id="content_0_agentsUL">
            <li>
                <a href="/agent-details/?ag={BF505982-DF16-4D09-BFE4-2ADDCADCC8E4}" class="agent-name link">Agent 1</a>
            </li>
            <li>
                <a href="/agent-details/?ag={42F1AE01-59F4-43DE-98C7-A1F99DB3A33C}" class="agent-name link">Agent 2</a>
            </li>
            <li>
                <a href="/agent-details/?ag={B3139686-12DA-44A1-A597-E05E1DD08007}" class="agent-name link">Agent 3</a>
            </li>
        </ul>
        <div id="agent-details"></div>
    </form>
</body>
</html>

【讨论】：