Почему после изменения знач. атрибута и чтения (со временем), выполняется действие которое предполагает предыдущее значение этого самого атрибута?

Question

[Sanya1407]

<button id = "id"   pressed = 'false' >Press to find film</button>

jQuery(document).ready(function(){

 $('form').hide();//прячу формы

 $("#id[pressed = 'false']").on('click',function(){    //Данная функция работает хорошо, но после pressed = true , вызываться 
	  $('form').show(1000);                                                                                                                   //должна бы вторая 
	  let goBack = 'Go Back';               
	  $('#id').html(goBack);  
           console.log($('#id').attr("pressed"));    //после первого срабатывания этой функции фолс, второй и дальше тру       
	  $('#id').attr({"pressed" : 'true'});
	  console.log($('#id').attr("pressed"));     
 });
 
 
 $("#id[pressed = 'true']").on('click',function(){                //Данная функция не вызывается
	 $('form').hide(1000);
	  let goBack = 'Press to find film';
	  $('#id').html(goBack); 
	$('#id').attr({"pressed" : 'false'});
	 console.log($('#id').attr("pressed"));	 
 })
 });

Answer 1

[Tendor]

Потому, что событие подписывается на DOM элемент, а не на селектор. По этому при подписании, $("#id[pressed = 'false']").on('click'
всегда будет срабатывать, а
$("#id[pressed = 'true']").on('click'
нет, так как в момент инициализации скрипта такого элемента с селектором нет.

Вот как надо

$(document).on('click', "#id[pressed = 'true']", function(){

$(document).on('click', "#id[pressed = 'false']", function(){

Мы подписываемся на документ и слушаем события click на указанных селекторах