Невозможно добавить события после загрузки AJAX с использованием jQuery

У меня есть веб-страница, на которой я использую AJAX jQuery для загрузки новых элементов в div. Эта часть моей страницы работает нормально.

Теперь я хочу добавить подобное событие в эти новые элементы. Для этого я планировал использовать метод.live() jQuery, но ничего не произошло.

Поэтому я изначально начну с этого

<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?

Источник

3 ответа

Решение

В конце концов я решил эту проблему, используя jQuery вместо "live".

Источник

Вы можете иметь только один #agent-name потому что идентификаторы являются уникальными. Вы можете просто использовать $('#agents .link') так как у вас уже есть класс на каждый якорь.

Источник

Не уверен, что это полезно, но это работает для меня:

<!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>
Источник
Другие вопросы по тегам