3

我有这个函数来创建对另一个文件的请求以更新数据库：

$('#thumb-up').live('click', function() {
    $('#loading').show();

    $.ajax({
            context: this,
            type: 'GET',
            url: '/gallery/configurations/required/photo-thumbs.php',
            data: 'i=21&t=1',
            success: function() {
                                  $('#loading').hide();
                                  $(this).attr('id', 'thumbup-undo').text('Sluta gilla');
                                  $('#thumbup-count').load('/gallery/configurations/required/thumbup-count.php?i=21&t=1');
                                 }
    });
});

$('#thumbup-undo').click(function() {
    alert('das');
});

当我单击带有 id 的链接时，thumb-up文本按预期更改为“Sluta gilla”。当我现在单击此链接时，相同 a 标记的 ID 将从更改为thumb-up，thumbup-undo并且将出现警报“dsa”。这里的问题是它没有出现！我什至不知道它是否会改变，thumbup-undo但我希望它不会。

您可以在此处尝试代码（我已缩短代码以使演示正常工作）。

我该如何解决这个问题？

提前致谢

4

4 回答 4

2

请尝试这个演示 http://jsfiddle.net/kxLzu/

我已经使用.prop和.on绑定点击，然后在成功时我告诉foo这个点击存在。

希望能帮助到你 ：）

请注意：.live已弃用，.on应改为使用。

代码

    $('#thumb-up').click(function() {
        $.ajax({
                context: this,
                type: 'GET',
                success: function() {
                       $(this).prop('id', 'thumbup-undo').text('Sluta gilla');
                      foo();
                                     }
        });
    });

function foo(){
    $('#thumbup-undo').on('click', function() {
        alert('das');
    });
}
​
于 2012-06-15T22:33:34.393 回答
2 
$('body').on('click','#thumb-up', function() {
    $('#loading').show();

    $.ajax({
            context: this,
            type: 'GET',
            url: '/gallery/configurations/required/photo-thumbs.php',
            data: 'i=21&t=1',
            success: function() {
                                  $('#loading').hide();
                                  $(this).attr('id', 'thumbup-undo').text('Sluta gilla');
                                  $('#thumbup-count').load('/gallery/configurations/required/thumbup-count.php?i=21&t=1');
                                 }
    });
});

$('body').on('click','#thumbup-undo', function() {
    alert('das');
});

您必须使用 ON，因为在页面加载后会向 dom 添加一个“新”元素。请记住 .live 在最新版本的 Jquery 中已弃用

于 2012-06-15T22:36:51.250 回答
0

问题是，在分配时，$("#thumbup-undo")不存在。它只是稍后创建的。

您可以通过使用来解决这个问题.live()，就像在这个更新的 Fiddle中一样。

于 2012-06-15T22:32:28.737 回答
0

使用.on代替
.click()（因为这是您的示例中的问题：#thumbup-undo创建单击处理程序时不存在）
并且代替.live()（因为在 jquery 1.7 中已弃用live()）。

于 2012-06-15T22:33:09.777 回答