0

我有一个网页，我使用 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元素。

即使我将代理名称类移动到列表元素并将 jQuery 更改为简单

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

当我单击元素时，我仍然一无所获。

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

4

3 回答 3

1

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

于 2012-11-21T14:31:40.407 回答
0

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

于 2010-11-25T15:24:33.660 回答
0

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

<!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>
于 2011-01-31T08:20:26.680 回答