为什么 .on() 不适用于页面上未预加载的链接？答案

【问题标题】：Why doesn't .on() work for links that weren't preloaded on the page?为什么 .on() 不适用于页面上未预加载的链接？
【发布时间】：2013-02-16 02:33:35
【问题描述】：

在尝试 hashchange 并发现它在 Internet Explorer 中根本不起作用后，我决定尝试使用 click() 方法。下面应该做的是，当点击链接时，检查 url 是否包含页面，然后将 link_content 的 html 更改为 id 等于哈希的 div 内容。

它适用于页面预加载的所有链接，但不会触发 link_content div 中的当前链接。为什么这不起作用？

$(document).ready(function() {          
    $('a').on("click", function(event){
        if (location.pathname.search("boh.html")){  
            hash=this.hash;
            if(hash=='#more'){
                $('#link_content').html($('#hiddenlist').html());
            }
            else if(hash){
                $('#link_content').html($(hash).html());
            }
        }
    });
});

【问题讨论】：

标签： javascript jquery

【解决方案1】：

试试：

$(document).on("click", "a", function (event) {
    // Your function stuff
});

这是on 方法的委托功能。它允许您将事件绑定到容器元素，但回调函数只会对您在第二个参数中提供的选择器指定的元素执行。使用document 作为这个场景的主要选择器可能不是最好的（虽然它应该可以正常工作），我认为你应该使用：

$("#page_container").on("click", "a", function () {

尝试将主选择器缩小到您希望将此事件绑定到的容器元素，因为它包含 <a> 元素。我想即使"body" 也可以工作，我不确定"body" 和document 之间哪个更受欢迎。这就是我的意思：

<body>
    <div id="main1">
        header stuff, no <a> elements
    </div>

    <div id="main2">
        main content, definitely contains <a> elements
    </div>
</body>

在这种情况下，我会使用$("#main2").on("click", "a", function () {，因为它缩小了事件可能发生的区域（并希望在点击事件发生时减少 jQuery 的处理）。

这是on 签名：http://api.jquery.com/on/#on-events-selector-data-handlereventObject

之所以可行，是因为事件绑定到容器，它不是（不应该是）动态的，并且始终可用（因此事件将始终被绑定） .当特定事件（在您的情况下为“单击”）从容器内的元素触发时，它会使容器冒泡，这就是该事件发挥作用的地方。事件将确定触发事件的元素是否匹配第二个参数选择器（如果提供），如果匹配，则在其上下文中执行事件。

【讨论】：