9

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

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。请帮忙。

4

4 回答 4

17

代替

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

经过

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

所以你可以使用委托事件。这样做，您的处理程序将申请可以创建的未来锚元素，这是您需要考虑到您在执行时从文档中删除锚replaceWith

演示

此处有关委托事件的更多详细信息（查看“直接和委托事件”部分）

于 2013-10-03T01:26:10.037 回答
3

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;

});

于 2013-10-03T01:35:49.100 回答
2

当文档最初加载它时，它会查看您的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/

于 2013-10-03T01:33:54.037 回答
0

标记的答案是正确的，我只是想自己补充一点，如果您需要更正错误，而不是针对所有链接，但例如，只有一个，此行将起作用（follow-unfollow-button是链接 id ) $(document).on('click', 'a#follow-unfollow-button', function(e) {

于 2020-05-27T07:08:27.400 回答