jQuery: 禁用一个锚点并创建一个具有相同 href 的新锚点

Question

我正在使用 Wordpress 插件将 Facebook 事件加载到网页中。有一个大主播，里面有一个事件div。我想在每个 fb-event div 的底部都有一个小锚。

我需要：

禁用第一个锚点而不移除它（移除它也会移除整个 div）。

在 fb-event 的底部创建一个新锚 div。

将 href 从第一个锚传递到第二个。

我觉得我已经很接近了，但什么也没发生，这是我的代码，首先是 html，然后是 jQuery。提前致谢！

<div class='fb-event'>
<a class="fb-event-anchor" href="http://www.facebook.com/event.php?eid=1165884803462190"  target="_blank">
<div class="fb-event-desc"><img src=https://scontent.xx.fbcdn.net/t31.0-8/s720x720/13920278_1335410149821833_1686522516711277604_o.jpg />
<div class='fb-event-title'>Spiritueel weekend - Een stapje verder</div>
<div class='fb-event-time'>10 september 2016 &#183; 10:00 -<br>11 september 2016 &#183; 17:00</div>
<div class='fb-event-location'>Balance in Life</div>
<div class='fb-event-description'>Lots
</div>
</div>
</a>
</div>

jQuery:

var fblink = $('.fb-event-anchor').attr('href');

$('.fb-event-anchor').click(function(){
                  return false; // prevents default action
});
$('.fb-event-description').append('<a class="fb-event-anchor-new" href="' . [fblink] . '"></a>');

Answer 1

试试下面的代码

$(function () {
    $('.fb-event-anchor').on("click", function (e) {
        e.preventDefault();
    });

var fblink = $('.fb-event-anchor').attr("href");
    $( ".fb-event" ).append( '<a class="fb-event-anchor-new" href='+ fblink +'>NEW LINK</a>' );
});

Answer 2

你想这样做吗？

var fblink = $('.fb-event-anchor').attr('href');

    $('.fb-event-anchor').click(function () {
        return false; // prevents default action
    });
    $('.fb-event-description').append('<a class="fb-event-anchor-new" href="'+fblink+'">fbanchor</a>');

Answer 3

两种解决方案都成功地创建了一个新的 link，但都没有使第一个 link 无法点击。我用 css:

反驳了最后一部分

.fb-event-anchor {
   pointer-events: none;
   cursor: default;
}

谢谢两位，Pratik 是第一个所以我会接受他的回答。

jQuery: 禁用一个锚点并创建一个具有相同 href 的新锚点

jQuery: disabling an anchor and creating a new one with the same href

html

php

wordpress

anchor

jquery