为什么在更改链接 ID 后执行相同的功能？答案

【问题标题】：Why Execute same function after changed ID of a link?为什么在更改链接 ID 后执行相同的功能？
【发布时间】：2011-12-29 12:37:47
【问题描述】：

我正在尝试使用 jquery 和 php 创建添加/删除收藏夹。 addfavorite 功能有效，但是当我将链接的 id 属性从 addfavorite 更改为 removefavorite 时，它不起作用。 id 改变了，但它仍然在做 addfavorite 功能。如果我打开 firebug，我会看到 id="removefavorite" 中的 ID 发生了变化，但是当我打开页面源时它没有更改 ID='addfavorite'

我可以用 jquery 更改链接的 ID，即使在 dom 中？

JQUERY:
$(document).ready(function() {
$('#addfavorite').click(function() {
    id = $('#item').attr('value');
    $.ajax({
        type: "POST",
        url: "http://127.0.1.1/zend/fm/public/video/addfavorite",
        data: "id_video="+id,
        cache: false,
        async: false,
        success: function(result) {
            $('#addfavorite').attr('id','removefavorite');
            $('#removefavorite').text('Remove from favorite');
        getRating(text);
        },
        error: function(result) {
            alert("some error occured, please try again later");
        }
    });
});

$('#removefavorite').click(function() {
    id = $('#item').attr('value');
    $.ajax({
        type: "POST",
        url: "http://127.0.1.1/zend/fm/public/video/removefavorite",
        data: "id_video="+id,
        cache: false,
        async: false,
        success: function(result) {
            $('#removefavorite').attr('id','removefavorite');
            $('#removefavorite').text('Remove from favorite');
        getRating(text);
        },
        error: function(result) {
            alert("some error occured, please try again later");
        }
    });
});
)};

HTML:
<a href="javascript:void(0)" id="addfavorite">
    Add to favorite
</a>

【问题讨论】：

JavaScript 对 HTML 所做的更改永远不会显示在您的页面源代码中。就像旁注一样。现在我将重新阅读您的问题。 :)
我在我的解决方案中添加了一个 JSFiddle 示例：jsfiddle.net/S2ERT

标签： jquery ajax dom attr favorite

【解决方案1】：

首先，您将使用多少个使用 ID 属性的链接？请记住，ID 仅适用于 single 元素。我建议您使用切换功能 http://api.jquery.com/toggle-event/ 来执行此操作。

我猜代码不起作用，因为您使用了 .click 事件而不是 .live 事件，并且当您将其绑定到 click 事件时，#removefavorite 事件不存在（因为它是 #removefavorite）。还要记住，事件被分配给元素，因此元素可以更改属性并仍然保留事件。如果您不想使用切换或实时功能，您可以在分配另一个点击事件之前取消绑定第一个点击事件。

此外，Firebug 会即时显示修改后的 DOM，这就是您可以看到它发生变化的原因。当您查看源代码时，您正在查看您下载的原始 HTML 文档（没有任何 javascript 更改它）。

我还建议您使用 Firefox 的 FireQuery 扩展：它会显示绑定到该元素的事件（如果您使用 jQuery 开发，还有其他有用的数据）

希望我的第一篇文章能帮到你:)

【讨论】：

我认为切换是最好的解决方案

【解决方案2】：

$('#addfavorite').toggle(function() {
     id = $('#item').attr('value');
     $.ajax({
        type: "POST",
        url: "http://127.0.1.1/zend/fm/public/video/addfavorite",
        data: "id_video="+id,
        cache: false,
        async: false,
        success: function(result) {
            $('#addfavorite').text('Remove from favorite');
            getRating(text);
        },
        error: function(result) {
            alert("some error occured, please try again later");
        }
     });
   }, function() {
     id = $('#item').attr('value');
     $.ajax({
        type: "POST",
        url: "http://127.0.1.1/zend/fm/public/video/removefavorite",
        data: "id_video="+id,
        cache: false,
        async: false,
        success: function(result) {
            $('#addfavorite').text('Remove from favorite');
            getRating(text);
        },
        error: function(result) {
            alert("some error occured, please try again later");
        }
     });
   });

不要更改元素的id，只需更改标签即可。我想它会对你有所帮助。

【讨论】：

【解决方案3】：

好的，答案是在$(document).ready(function() { ... }中加载文档后绑定点击函数。

因此，如果 Ajax 调用成功，您确实更改了链接的 ID，这应该可以工作。我无法发现其中的任何错误。问题是您不会刷新触发器。因此，即使元素上的 ID 发生了变化，上一个触发器仍然绑定到它。所以解决它的方法是通过重做$('#removefavorite').click(function() { ... } );来刷新触发器

为此编写另一个函数，因为您不能将它相互嵌套 1290383948 次。 ;-)

这是我在 JSFiddle 中快速制作的一个示例：http://jsfiddle.net/S2ERT/ 它没有正确编码，因为我在 1 分钟内完成了此操作，但您会明白的。

【讨论】：