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_开头的任何ID。一切似乎都有效，包括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>");
            });
        }
    );
});

more here

Answer 4

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

更好地删除锚点的href ..或

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

用span或div或p替换anchor标签

4 个答案: