使用jquery覆盖锚标记的默认行为

Jul*_*lio 17 javascript anchor jquery

我试图覆盖锚标记的默认行为,以便我可以将我的服务器上的网页加载到现有的div中,而不是新的选项卡或窗口.

到目前为止我有:

myContainer.click(function(){                   
                    event.preventDefault();
                    $('a').click(function(){
                        var link = $(this).attr('href');
                        myContainer.load(link);
                    });
            });
Run Code Online (Sandbox Code Playgroud)

在Chrome中,我必须在它执行任何操作之前单击链接两次,在IE中,它根本不起作用并使用新链接刷新页面.

任何帮助深表感谢.

Fel*_*ing 25

不应该只是:

 $('a').click(function(e) {
     e.preventDefault(); 
     myContainer.load(this.href);
 });
Run Code Online (Sandbox Code Playgroud)

您的代码在单击处理程序中分配了一个单击处理程序.因此,第一次单击将将单击处理程序附加到链接,第二次单击(在链接上)将执行新的单击处理程序.

看来你只需要一个点击处理程序.如果链接动态添加,你可以使用.on()(的继任者.live.delegate):

myContainer.on('click', 'a', function(e) {
     e.preventDefault(); 
     myContainer.load(this.href);
});

// or

$(document).on('click', 'a', function(e) {
     e.preventDefault(); 
     myContainer.load(this.href);
});
Run Code Online (Sandbox Code Playgroud)

  • @Julio:`live`为文档根添加一个事件处理程序(所以事件必须冒泡整个DOM树),而`delegate`将事件处理程序添加到某个元素(在本例中为`myContainer`).所以在这个`委托`示例中,只处理*`myContainer`里面的链接*上的点击事件,而处理每个链接的点击,虽然你也可以写'$('#myContainer a'). live()`.但正如我所说,使用`delegate`,事件处理程序可以绑定到更靠近原始元素的元素.你应该更喜欢`delegate`而不是`live`. (2认同)