更改元素ID后无法触发操作

Question

我有一个显示/隐藏密码按钮，当我单击以显示密码时，它的工作原理，但是当我尝试再次隐藏它时，它不会。

小提琴：http://jsfiddle.net/vcvgj09z/

<input type="password" id="pass1" value="Now try to hide me"> 
<a href="#" id="show-password"><i class="fa fa-eye"></i> Show</a> 

    $("#show-password").on("click",function() { 
     $(this).html('<i class="fa fa-eye-slash"></i> Hide'); 
     $(this).prop("id","hide-password"); 
     $("#pass1").attr("type","text"); 
    }); 
    $("#hide-password").on("click",function() { 
     $(this).html('<i class="fa fa-eye"></i> Show'); 
     $(this).prop("id","show-password"); 
     $("#pass1").attr("type","password"); 
    }); 

Answer 1

按我的意见，为什么你的代码是不工作的原因是因为该元素#hide-password不存在在运行时的DOM，所以没有点击事件将被绑定到它 。

尽管您可以使用.on()来侦听事件冒泡，但我强烈建议不要更改元素的ID。相反，您可以将切换开关状态存储为jQuery data对象。这种方法的优点是：

• 不依赖于改变标记和事件通过评估和修改的jQuery data对象
• 允许其它元件来操纵鼓泡
• 存储密码的切换状态/影响切换状态

见小提琴这里：http://jsfiddle.net/teddyrised/vcvgj09z/10/

$('#toggle-password').click(function() { 
    // Check state 
    if(!$(this).data('state') || $(this).data('state') == 0) { 
     // If the data object "state" is undefined or have a value of 0, convert password to text 
     // Update HTML and data object 
     $(this) 
     .html('<i class="fa fa-eye-slash"></i> Hide') 
     .data('state', 1); 

     // Change password to text 
     $("#pass1").attr('type', 'text'); 
    } else { 
     // If the data object "state" has a value of 1, convert text to password 
     // Update HTML and data object 
     $(this) 
     .html('<i class="fa fa-eye"></i> Show') 
     .data('state', 0); 

     // Change text to password 
     $("#pass1").attr("type","password"); 
    } 
}); 

Answer 2

尝试这样的事情...

$("body").on("click", "#show-password", function() { 

...和...相关

$("body").on("click", "#hide-password", function() { 

这样，当ID动态变化，点击即可使用。

Answer 3

您应该使用委托。因为你产生新的DOM

$(document).on("click","#show-password",function() { 
    //.... 
}); 
$(document).on("click","#hide-password",function() { 
    //.... 
}); 

Answer 4

您的代码不起作用，因为它不支持动态设置的元素。

为动态添加的元素设置事件的正确方法是使用$(document).on()。

JS：

$(document).on("click", "#show-password", function() { 
    $(this).html('<i class="fa fa-eye-slash"></i> Hide'); 
    $(this).prop("id","hide-password"); 
    $("#pass1").attr("type","text"); 
}); 

$(document).on("click", "#hide-password", function() { 
    $(this).html('<i class="fa fa-eye"></i> Show'); 
    $(this).prop("id","show-password"); 
    $("#pass1").attr("type","password"); 
}); 

Updated jsFiddle