jQuery事件无法识别更新的属性

Question

我有一个属性为id =“x”的div，我在jQuery中有以下代码：

$(document).ready(function()
{
    $('#x').click(function(){
        $(this).removeAttr('id');
         alert('something')
    });
});

现在每当我点击div时，都会删除id属性并弹出消息。但是当我再次单击该元素时，该消息仍然会弹出。如何在第一次单击属性时删除该属性会发生这种情况？

Answer 1

该元素在jquery中以其id保持实例化。
试试这个工作正常：

$(document).on('click','#x',function(){
        $(this).removeAttr('id');
         alert('somethin');
    });

DEMO

Answer 2

你可以使用一个，这样只发生一次

$('#x').one('click', function(){
    $(this).removeAttr('id');
     alert('something)
});

jQuery one();

但最好使用事件委托，以便在每次点击时检查元素的ID，如

$(document).on('click', '#x', function() {
    $(this).removeAttr('id');
    alert('something)
});

以下是有关为何会发生这种情况的一些信息。

使用你的代码jQuery获取具有id #的id的元素然后添加事件监听器，此时事件监听器不会被告知在触发事件之前检查id，因此事件将是永远附加到该元素，而使用上面的示例，每次用户单击文档时，jQuery将检查event.target的ID以查看它是否匹配，然后将触发回调。

Answer 3

因为事件绑定到文档就绪的元素。删除属性不会停止已绑定的事件触发。如果那是你想要的，你需要$(this).off('click')。