html - jQuery Ajax 响应后动态链接不起作用

Question

我有由 ajax 响应创建的动态菜单链接。它仅在页面最初加载时有效，但在新页面时无效。我尝试使用 .On 绑定(bind)它，但这不起作用。请参阅代码和标记。希望有人知道为什么它不会绑定(bind)。

    $(document).ready(function(){
        $(document).on('click', function(e) {
                var $clicked = $(e.target);
                if (! $clicked.parents().hasClass("menu")){
                    $(".menu dd ul").hide();
                    $(".menu dt a").removeClass("selected");
                }

        });

        $(".menu dt a").on('click', function(e) {

            var clickedId = "#" + this.id.replace(/^link/,"ul");

                // Hides everything else that the current menu 
            $(".menu dd ul").not(clickedId).hide();

                //Toggles the menu.
            $(clickedId).toggle();

                //Add the selected class.
            if($(clickedId).css("display") == "none"){
                $(this).removeClass("selected");
            }else{
                $(this).addClass("selected");
            }

        });
});

标记如下。

        <div class="floatLeft" style="width:15px;">
            <dl style="" class="menu">
               <dt>
               <a class="" id="linkglobal_1" style="cursor: pointer;"></a><span class="result"></span></dt>
                <dd>
                    <ul style="display: none;" id="ulglobal_1">
                        <li><a href="#">Friends</a></li>
                        <li><a href="#">Only Me</a></li>
                        <li><a href="#">Customize</a></li>
                  </ul>
               </dd>
            </dl>
        </div>

Answer 1

事件委托(delegate)需要这样:

$(document).on('click', ".menu dt a", function(e) {