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属性。为了使它工作，Event delegation是解决方案：

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

$(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'）的元素并且该函数不能被绑定，所以如果你在第一个函数中定义第二个函数，你就避免这个。

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

1st）当鼠标悬停在#some元素

时，将#some的id更改为#new

2nd）点击#new元素

时淡出#new

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

2 个答案: