0

在为站点设置 ajaxnavigation 时，我遇到了 jQuery 选择器的问题。该站点基于 twitter 引导程序，并使用框架提供的导航栏和下拉菜单。

section#main单击链接时，我使用 hashchange 事件将新内容加载到其中class="ajaLink"。

我被卡住了，因为该事件似乎不会绑定到 twitter 引导下拉菜单中的链接。我调查了下拉列表的 JS，但我看不到任何会阻止事件被绑定和触发的东西。

沮丧地我改变了选择器

$(document).on('click', '.ajaxLink', function (e) {
    ...
}

到

$('.ajaxLink').on('click', function (e) {
    ...
}

这使得事件绑定到导航栏和下拉列表中的所有链接，但会将链接保留在动态加载的内容中。

我无法弄清楚这两个选择器之间的区别以及为什么会出现这种行为。到目前为止，我的解决方案是同时使用这两个选择器，但只要我不能确定事件不会两次绑定到同一个元素，这感觉不是一种解决方案。

那么问题是使用的两个选择器之间有什么区别？我将如何重写选择器以确保我.ajaLink只绑定每个元素一次？

的HTML...

<!DOCTYPE html>
<html>
<head>


</head>
<body>
    <div class="container">
        <header>
            <div class="navbar navbar-inverse">
                <div class="navbar-inner">
                    <div class="container">
                        <!-- Minimizing the menu under a button when screen gets too small. -->
                        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                            ...

                        </a>

                    <div class="nav-collapse">
                    <ul class="nav">
                        <!-- Choose application. -->
                        <li class="dropdown">
                            <a class="dropdown-toggle" href="#" data-toggle="dropdown"> Menu 1 <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li class=""><a class="ajaxLink" href="/Blabla">Blabla</a></li>
                                <li class=""><a class="ajaxLink" href="/Yadayada">Yadayada</a></li>
                                ...
                            </ul>
                        </li>
                        <!-- Choose application. -->
                        <li class="dropdown">
                            <a class="dropdown-toggle" href="#" data-toggle="dropdown"> Menu 2 <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li class=""><a class="ajaxLink" href="/Blabla2">Blabla 2</a></li>
                                <li class=""><a class="ajaxLink" href="/Yadayada2">Yadayada 2</a></li>
                                ...
                            </ul>
                        </li>
                    </ul>
                    <form class="navbar-search pull-right" action="/Home/Search" method="post" >
                        <input type="search" class="search-query" placeholder="Sök" />
                        <button type="submit" class="btn btn-inverse" id="search-button ">Search</button>
                    </form>


                  </div><!--/.nav-collapse -->
                </div>
              </div>
            </div>
        </header>
        <div class="log label label-important" style="display:none;" ></div>
    <section id="main" style="opacity: 1; ">

    <div class="row-fluid">   
    <div class="span2">

    </div> 
    <div class="span10">
        <span class="gradientlabel"><a href="#">Artiklar</a></span> 

        <table class="table table-striped table-bordered table-condensed overview-table">
            <tbody><tr>
                <th>
                    Art No.
                </th>
                <th>
                    Description
                </th>
                <th>
                    Price
                </th>
                <th></th>
            </tr>

            <tr>
                <td>
                    16791
                </td>
                <td style="overflow:hidden;white-space: nowrap;">
                    175/70-13 82Q Semperit Ice Grip 2 Dubbat
                </td>
                <td>
                    300
                </td>
                <td>
                    <a class="ajaxLink" href="/Artiklar/Edit/16791">Edit</a> 
                </td>
            </tr>
            <tr>
                <td>
                    16792
                </td>
                <td style="overflow:hidden;white-space: nowrap;">
                    195/55-15 85Q Uniroyal Nordic Dubbat
                </td>
                <td>
                    550
                </td>
                <td>
                    <a class="ajaxLink" href="/Artiklar/Edit/16792">Edit</a> 
                </td>
            </tr>
            ...
        </tbody></table>
    </div>
    </div>
    </section>
        <footer>
        </footer>
    </div>

</body>
</html>

Javascript

//Add event for all ajaxLink (except for the ones in the bootstrap dropdown)
$(document).on('click', '.ajaxLink', function (e) {
    var self = $(this);
    if (self.attr('href').length > 2) {
        window.location.hash = "!" + self.attr('href');
    }
    return false;
});

//I dont really know yet, but this is the only way to attach the event to bootstraps dropdown, and also have to close the dropdown programmatically.
$('.ajaxLink').on('click', function (e) {
    var self = $(this);
    //if (self.prop('tagName') != 'A') { alert('not a link'); self = self.find('a:first'); }
    if (self.attr('href').length > 2) {
        window.location.hash = "!" + self.attr('href');
    }
    self.closest('.dropdown').removeClass('open');

    return false;
});
4

2 回答 2

3

不同之处在于$('.ajaxLink').on('click', function (e) { ... } 只绑定已经存在的元素。

$(document).on('click', '.ajaxLink', function (e) { ... }有一个委托，还绑定.ajaxLink了将来动态创建的元素。


如果你想要一个委托，你真的应该使用一个比document. 原因是在 DOM 树中节省了不必要的搜索，从而提供了更好的性能。

于 2012-08-26T10:08:16.137 回答
2

从我从JQuery docs中读到的内容来看，它似乎$('.ajaxLink')返回了一个包含所有当前匹配的 DOM 元素的数组，on('click')然后被绑定到该数组中的每个项目一次，而$(document).on(’click')在单击文档的任何后代时都会被调用， then 仅在它与方法中传递的 filert 匹配时才被执行.on()。

考虑到这一点，您还可以尝试以下方法：

$(".dropdown-menu").on("click", ".ajaxLink", function(e) { ... });
于 2012-08-26T10:22:49.333 回答