参考ID（如选择器），其是已经HTML链接标记

我具有由一个核心模块生成链路内（意味着我不能修改的代码）作为这样的：参考ID（如选择器），其是已经HTML链接标记

<a id="my-unique-id-1" class="my-link-class" href="/switch off">Switch off</a>

问题是，ID和类位于<a>标记内，我没有任何可用的元素缠绕在我可以使用的链接上。

单击时，它会做什么，它做服务器端（见下面的代码），然后返回此：

<a id="my-unique-id-1" class="my-link-class it-is-off" href="/switch on">Switch on</a>

我想更换或修改完成第一个链接。

首先，jQuery脚本：

$(".my-link-class").click(function() { 
    var current_id = $(this).attr('id'); 
    var link = $(this).attr('href'); 

    $.ajax({url: link, success: function (result) { 
    //All works fine up to here. The changes are made in server side and returns the new link as the result. 
//Following is my problem: 

    if(result){ 
     $(current_id).replaceWith(result); //the selector is wrong, I know. 
    } 
    } 
}

我的问题是，ID（current_id）已经是<a>标签内。如何参考标签中的选择器。我想：

$(current_id).replaceWith(result); //nothing happens 
$('#' + current_id).replaceWith(result); 
$('a#' + current_id).replaceWith(result);

但我得到的最后两个类型错误：Node.appendChild的参数1未实现接口节点。（我知道我可以做的其他事情比replaceWith如改变链接中的文本和href，但这里的问题是首先找到选择器）。

来源

2015-07-01 Quentin Campbell

'$（a.my-link-class）'在句法上不正确。那是因为它是示例代码吗？ –

你可以用他们的hrefs来获取它们，比如'$（'[href =“/ switch off”]'）' – Ted

Typo fixed $（“。my-link-class”） –

你可以用$(this).replaceWith()：

$(document).on('click', '.my-link-class', function() { 
 
    var html = '<a id="my-unique-id-1" class="my-link-class it-is-off" href="/switch on">Switch on</a>'; 
 
    $(this).replaceWith(html); 
 
    return false; 
 
});

.it-is-off { 
 
    color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a id="my-unique-id-1" class="my-link-class" href="/switch off">Switch off</a>

来源

2015-07-02 05:55:51

我认为有两件事情发生在这里。

您要使用的ID来替换元素，当它会更容易的引用只保留到要更换而不是寻找它两倍的DOM元素。
您正在将事件绑定到您然后要替换的锚标记。一旦你更换它，事件就会消失。避免这个问题的方法是将你的事件绑定到不会改变的地方。这可能是您要替换的元素之上的元素，或者它可以是更高的元素，如body元素。

下面是解决这两个问题的可能解决方案。我写了一个名为simulatedAjax的函数来说明我认为你说的后端代码正在做什么。它遵循与使用configurationObject, callback(result)签名的jQuery $ .get相同的想法。

function simulatedAjax(config, done){ 
    var onOffText = (config.url === "on" ? "off" : "on"); 

    done('<a href="'+onOffText+'" id="custom-thing" class="custom-link">Switch '+ onOffText +'</a>'); 

}

现在你的客户端代码

$(function(){ 

    // Bind the click to the body element, but with a delegate to your link class .custom-link 
    $('body').on('click', '.custom-link', function(e){ 

    // Store a reference to the A tag, name is irrelevant but self is easy to understand 
    var self = this; 

    // Keep the page from actually navigating to the href 
     e.preventDefault(); 

     //Replace with real jQuery $.get or $.ajax with configuration 
     simulatedAjax({ 
      url: $(this).attr('href') 
     }, function(resultHTML){ 

      // Since we stored a reference to the original in the self variable, we can just replace it here. Note that if we tried to use `this` here, it wouldn't refer to the right `this` 
      $(self).replaceWith(resultHTML); 
     }); 
    }); 
});

你可以看到这个代码示例在此的jsfiddle http://jsfiddle.net/x83vfmuw/

希望这有助于工作！

来源

2015-07-02 06:13:51 Will

参考ID（如选择器），其是已经HTML链接标记

回答

相关问题