javascript - 使用相同的 ajax 调用打开多个动态链接

Question

我正在显示多个使用相同的动态链接，ajax 可以很好地加载第一个链接上的内容，但对其余链接不起作用。如何让它在同一个div中加载其他链接的内容？

HTML:

$string .= '<a id="hrefid" data-id="'.$name["id"].'" href="link" >'.$name["name"].'</a>'.
<div id="content"> </div>

Jquery:

$('#hrefid').on('click', function (e) {
    var load = $(e.target).attr("href");
    if(load == "#link") {
        $.ajax({
            type: 'post',
            url: "/page/test/"+id,
            complete: function (event) {
                $("#content").contents().remove();
                $("#content").append(event.responseText);
            }
        });
    }
    });

Answer 1

把id改成类，去掉if语句中的#

$string .= '<a class="hrefid" data-id="'.$name["id"].'" href="link" >'.$name["name"].'</a>'.
<div class="content"> </div>

$('.hrefid').on('click', function (e) {
    var el = $(this);
    var load = $(e.target).attr("href");
    if(load == "link") {
        $.ajax({
            type: 'post',
            url: "/page/test/"+id,
            success: function (event) {
                el.next().empty();
                el.next().append(event.responseText);
            }
        });
    }
    });