javascript - 用 span 或 div 或 p 替换锚标记

Question

我有一个功能，一旦用户单击链接，就会发出 ajax 请求，如果发出请求，则链接不应再可点击。

这是我用来完成此任务的方法：

$('a[id^="rsvp_"]').click (function (e) {
    e.preventDefault();
    $.post(
        $(this).data('url'),
        function(data) {
            $(this).replaceWith(function(){
                alert (data);
                return $("<span>" + data + "</span>");
            });
        }
    );
})  ;

此代码将适用于任何以rsvp_. 一切似乎都有效，包括alert(data)锚标签仍然存在。我只是想将锚标签替换为其他东西。

HTML 片段如下所示

<a id="rsvp_${event.id}" href="#" data-url="${createLink(action: 'myaction', params: ["eventid": event, "userid": user])}">Click to RSVP</a>

更新

请注意，我在页面上有多个这样的链接，即rsvp_1, rsvp_2, rsvp_3 ..etc

我只想删除用户单击的链接上的锚标记。并非页面上的所有链接

Answer 1

尝试这个：

$('a[id^="rsvp_"]').click(function (e) {
    e.preventDefault();
    $.ajax($(this).data('url'), {
        method: 'POST',
        context: this
    }).done(function(data) {
        $(this).replaceWith("<span>" + data + "</span>");
    });
});

Answer 2

尝试这个

$(e.target).replaceWith(function(){
        return $("<span>" + $(this).html() + "</span>");
    });

Answer 3

您可以通过使用 jquery .one 方法来实现相同的目的，该方法确保每个选定的元素只能单击一次。

在这种情况下，如果可能的话，我会亲自将所有锚标签默认更改为 p 或 spans，然后在选定的元素上单击一次，例如：

$('p[id^="rsvp_"]').one ("click", function (e) {
    e.preventDefault();
    $.post(
        $(this).data('url'),
        function(data) {
            $(this).replaceWith(function(){
                alert (data);
                return $("<span>" + data + "</span>");
            });
        }
    );
});

更多在这里

Answer 4

$("a").removeAttr("href");

更好地删除锚的href ..或

  $(this).replaceWith(function(){
      return $("<span>" + $(this).html() + "</span>");
  });