0

jQueryのAJAXを使用して新しい要素をdivにロードするWebページがあります。私のページのこの部分は正常に機能します。

これらの新しく追加された要素に同様のイベントを追加したいと思います。これを行うために、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コールバックで作成された要素にイベントをレイトバインドできるようにこれを修正する方法を説明できますか？

4

3 に答える 3

1

最終的には、「ライブ」の代わりにjQueryのonを使用してこれを解決しました。

于 2012-11-21T14:31:40.407 に答える
0

#agent-nameIDは一意であるため、1つしか持つことができません。$('#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 に答える