Question

我基本上有一个调用REST API的ajax调用，它给出了所有名称的列表，我有另一个与之匹配的REST API。例如，

/list gives me: list1,list2,list3

和

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

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

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

这是我的代码：

$(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

这些是动态添加的锚标签。将click事件处理程序添加到锚标记时，它们不存在。因此，当您单击这些锚时，它们将绕过您的jquery事件处理程序并执行它们通常默认执行的操作。（further explanation）您在$ .each函数中再次使用相同的代码，如果您有在$（＆＃39;＃exDiv＆＃39;）之后调用它。附加（html）;线。但是当你打电话时，它们仍然不存在。

根据您使用的jQuery版本，您应使用＆＃34; on＆＃34;或＆＃34;生活＆＃34;。如果您使用的是1.7或更高版本，请使用＆＃39;。

试试这个：

$(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();
});

e.preventDefault仍会在浏览器的新选项卡中加载锚链接

1 个答案: