Question

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

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

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>

Answer 1

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

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

此外，Firebug动态显示已修改的DOM，这就是为什么您可以看到它已更改。当您执行视图源时，您正在查看您下载的原始HTML文档（没有任何javascript更改它）。

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

希望我的第一篇文章可以帮助你：）

Answer 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只需更改标签。我认为它会对你有帮助。

Answer 3

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

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

来刷新触发器

为此编写另一个函数，因为你不能将它们彼此嵌套1290383948次。 ; - ）

这是我在JSFiddle中快速制作的一个例子：http://jsfiddle.net/S2ERT/ 它没有正确编码，因为我在1分钟内做了这个，但你会理解这个想法。

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

3 个答案: