Question

我有一个显示/隐藏密码按钮，当我点击显示密码时，它可以工作，但是当我试图再次隐藏它时它不会。

<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

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

为动态添加元素设置事件的正确方法是使用$(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

Answer 4

你应该使用委托。因为你生成了新的DOM

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

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

4 个答案: