在元素ID更改后，JQuery Click（）无法正常工作

Question

我尝试更改元素ID，然后用它做一些事情。 此脚本更改了ID，但是单击不起作用。 有些朋友提供了以下解决方案，但我想了解原因。

感谢帮助。

$('#some').hover(
   function(){
       $(this).attr('id', 'new');
   }
);
$('#new').click(
   function(){
       $(this).fadeTo('slow' , 0.2);
   }
); 

解：

$('#new').on('click',
function(){
   $(this).fadeTo('slow' , 0.2);
}
);

但为什么我不能直接使用'click'？

更新：

谢谢大家的答复。 这是一个跟进：我使用'on'方法来启动click事件。 然后我可以在函数本身中包含相同的id以使其淡入淡出吗？

码：

       $('#new').live('click',
        function(){
       $('#new').fadeTo('slow' , 0.2);
       }
       );

我尝试了我的结果，但未能启动该活动。 任何解决方案建议表示赞赏。

Answer 1

您正在动态更改DOM属性。 并且事件附加到DOM，而不是像class，id，name-value等DOM属性。为了使它工作， 事件委托是解决方案：

事件委托允许我们将单个事件侦听器附加到父元素，该元素将为匹配选择器的所有后代触发，无论这些后代现在是存在还是将来添加。

$(document).on('click','#new',function(){
   $(this).fadeTo('slow' , 0.2);
}); 

Answer 2

试试这段代码：

$('#some').hover( 
    function(){ $(this).attr('id', 'new'); 
    $('#new').click( function(){ 
          $(this).fadeTo('slow' , 0.2); 
    })  
}); 

你的问题是当你定义第二个函数时，没有名为$（'#new'）的元素，并且该函数不能被绑定，所以如果你在第一个函数中定义第二个函数，你就避免这个。

我尝试了这段代码，对我来说非常适合

1）当鼠标悬停在#some元素上时，将#some的id更改为#new

2）单击#new元素时淡出#new