Невозможно вызвать действие после изменения идентификатора элемента.

Question

У меня есть кнопка «показать/скрыть пароль», когда я нажимаю кнопку «Показать пароль», она работает, но когда я пытаюсь скрыть ее снова, это не так.

Fiddle: 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() для прослушивания пузырьков событий, я настоятельно рекомендую не изменять идентификаторы элементов. Вместо этого вы можете сохранить состояние включения/выключения в качестве объекта 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() { 

Таким образом, когда идентификатор динамически изменяется , щелчок будет работать.

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