javascript - e.preventDefault 仍然会在浏览器的新选项卡中加载 anchor 链接

Question

我基本上有一个ajax调用，它调用一个REST API，它为我提供所有名称的列表，并且我有另一个与之匹配的REST API。例如，

/list gives me: list1,list2,list3

和

/api/list1.json gives me: json of list1..

但是我有我的代码，可以循环遍历所有列表并调用/api/list1.json

我希望 JSON 在 a 时显示在 div 中onclick 事件通过抓取 href 发生相应地无需重新加载页面。但现在，因为这也是一个有效的链接，浏览器只会带我去那里。

这是我的代码:

$(function() {
   $.ajax({
     dataType: 'json'
     url: '/lists',
       success: function (data) {


if (data != null) {
                     var html = '<ul>';
                      $.each(data.apis, function (i, item) {
                           //click event
                           $('a').click(function(e) {
             e.preventDefault();
          });


                            html += '<li class="res">';
                            html += '<div class="hed"><h2><a href="/api/' + item + '.json">' + item + '</a></h2></div>';
                            html += '</li>';
                        });

                        html += '</ul>';

                        $('#exDiv').empty();
                        $('#exDiv').append(html);
                    }
                },
                error: function () {
                    alert('Error');
                },
                contentType: 'application/json'
            });
         $('a').click(function(e) {
             e.preventDefault();
          });


        });

显然我还添加了e.preventDefault()但它仍然会触发指向新选项卡的链接。

Link to e.preventDefault()

Answer 1

这些是动态添加的 anchor 标记。当您将单击事件处理程序添加到 anchor 标记时，它们不存在。因此，当您单击这些 anchor 时，它们将绕过您的 jquery 事件处理程序并执行默认情况下通常执行的操作。( further explanation )您在 $.each 函数中再次拥有相同的代码，如果您调用了它，该代码可能会起作用在你的 $('#exDiv').append(html); 之后线。但当你调用它时，它们仍然不存在。

根据您使用的 jQuery 版本，您应该使用“on”或“live”。如果您使用的是 1.7 或更高版本，请使用“on”。

试试这个:

$(function() {
    $.ajax({
        dataType: 'json'
        url: '/lists',
        success: function (data) {
            if (data != null) {
                var html = '<ul>';
                $.each(data.apis, function (i, item) {
                    html += '<li class="res">';
                    html += '<div class="hed"><h2><a href="/api/' + item + '.json">' + item + '</a></h2></div>';
                    html += '</li>';
                });
                html += '</ul>';
                $('#exDiv').empty();
                $('#exDiv').append(html);
            }
        },
        error: function () {
            alert('Error');
        },
        contentType: 'application/json'
    });

    $(document).on('click', 'a', function(e) {
        e.preventDefault();
    });
});

如果您使用的是 1.6 或更早版本，您的点击事件处理程序应如下所示:

$('a').live('click', function(e) {
    e.preventDefault();
});