Question

我想要一个这样的链接：当它被点击时，它会变为文本，当鼠标移出文本时，它会返回链接。

HTML：

    <a href="#">click me and change to text</a>

JS：

    $("a").on('click',function(){
        var $lnk = $(this);
        var $replace = $('<span>');
        $replace.text($lnk.text());
        // Link to Text
        $lnk.replaceWith($replace);
        // Text to Link
        $replace.one('mouseout',function(){
            $replace.replaceWith($lnk);
        });
        return false;
    });

该代码仅适用于第一次。似乎$("a").on("click",function(){})之后replaceWith无法正常工作。

小提琴：http://jsfiddle.net/uABC9/4/

我正在使用jQuery 1.10.1并测试了FF和Chrome。请帮忙。

Answer 1

替换

$("a").on('click',function(){

通过

$(document).on('click','a',function(){

所以你可以使用委派的事件。这样做，您的处理程序将申请将来可以创建的锚元素，这是您在执行replaceWith

时考虑到从文档中删除锚点所需要的

DEMO

有关委派事件here的更多详细信息（请参阅“直接和委派事件”部分）

Answer 2

jQuery“on”有效，但因为它是一个链接，所以当你点击它时会链接到其他地方。

这是一个小提琴：http://jsfiddle.net/joydesigner/4f8Zr/1/

另一个原因可能是你的代码使用$ replace.replaceWith（$ lnk），因为$ lnk就是这个。所以这意味着它仍将使用相同的文本和链接。

以下是代码：

$("a").on('click',function(){
  var $lnk = $(this),
      $replace = $('<span>');

$replace.text($lnk.text());
// Link to Text
$lnk.replaceWith($replace);

// Text to Link
$replace.one('mouseout',function(e){
    $replace.replaceWith('<a href="#">test</a>');
});

e.preventDefault();
return false;

}）;

Answer 3

当文档最初加载观看您的a标记以进行点击时。但是当a标记被替换为新标记时，它不再会看到新标记。

我会建议在你的链接上添加一个div，让jQuery监视div中的所有链接点击。如我的例子所示。

HTML

<div id="test">
   <a href="#">click me and change to text</a>
</div>

的jQuery

$("#test").on('click','a',function(){
   var $lnk = $(this);
   var $replace = $('<span>');
   $replace.text($lnk.text());
   // Link to Text
   $lnk.replaceWith($replace);
   // Text to Link
   $replace.one('mouseout',function(){
      $replace.replaceWith($lnk);
   });
   return false;
});

http://jsfiddle.net/uABC9/8/

Answer 4

标记的答案是正确的，我只是想自己补充一下，如果您需要更正错误，请不是所有链接，例如，仅一个 strong>，此行将起作用（跟随-取消跟随按钮是链接ID） $(document).on('click', 'a#follow-unfollow-button', function(e) {

jQuery - `on`事件在jQuery.replaceWith之后不起作用

4 个答案: