Cambié la identificación del atributo de un botón. La identificación anterior #slide_save_button tiene un color azul claro, y la nueva identificación #slide_save_button_open tiene un color azul oscuro, que cambia cuando se supone que debe hacerlo. Pero cuando intento hacer clic en el botón (al referirme a su nueva identificación #slide_save_button_open) no ejecutará el archivo console.log ("clic"). ¿Por qué?
$("#catName").on("input", function(){ if( $("#catName").val().length > 0 ){ $("#slide_save_button").attr('id', 'slide_save_button_open'); } else { $("#slide_save_button_open").attr('id', 'slide_save_button'); } }); $("#slide_save_button_open").on("click", function(){ console.log("clicked"); });Su enfoque falla porque el código busca el elemento en ese momento. Cuando lo encuentra, lo ata. El código no sigue buscando elementos.
Para hacerlo a su manera, necesitaría usar la delegación de eventos.
$("#catName").on("input", function() { if ($("#catName").val().length > 0) { $("#slide_save_button").attr('id', 'slide_save_button_open'); } else { $("#slide_save_button_open").attr('id', 'slide_save_button'); } }); $(document).on("click", "#slide_save_button_open", function() { console.log("clicked"); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="myForm"> <label for="catName">Name:</label> <input id="catName" name="catName"/> <button type="button" id="slide_save_button" name="slide_save_button">Run</button> </form>Ahora, cambiar la identificación no es realmente la mejor solución. Probablemente debería simplemente adoptar un enfoque de "validación" y usar una variable para mantener el estado o puede usar una clase.
const btn = $("#slide_save_button"); $("#catName").on("input", function() { btn.toggleClass("open", $("#catName").val().length > 0); }); btn.on("click", function() { if (btn.hasClass("open")) { console.log("clicked"); } else { console.log("need to fill in"); } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="myForm"> <label for="catName">Name:</label> <input id="catName" name="catName" /> <button type="button" id="slide_save_button" name="slide_save_button">Run</button> </form>Pero podrías usar la validación de HTML5
const form = $("#myForm"); form.on("submit", function (evt) { evt.preventDefault(); console.log("clicked"); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="myForm"> <label for="catName">Name:</label> <input id="catName" name="catName" required/> <button type="submit" id="slide_save_button" name="slide_save_button">Run</button> </form>$("#slide_save_button_open") busca en el DOM un elemento que tenga esa ID en este momento . Luego le agrega un controlador de eventos.
Cuando cambia la ID más tarde, no elimina retroactivamente los controladores de eventos existentes y vuelve a ejecutar el código original para adjuntar otros nuevos.
Puede lograr algo así con la delegación de eventos donde vincula el controlador de eventos a un elemento antepasado y escucha un evento burbujeado.
$(document).on("click", "#slide_save_button_open", function () { .... });También podría probar algo sobre el elemento dentro del controlador de eventos:
$("#slide_save_button").on("input", function(e) { if ( $(e.currentTarget).attr('id') === 'slide_save_button_open') {Dicho esto, recomendaría probar una característica diferente del elemento y no cambiar la ID. Sigue siendo lo mismo incluso si está en un estado diferente.
Eche un vistazo al ejemplo del botón del menú de navegación . Podrías hacer uso de aria-expanded="true" .
Basado en este https://stackoverflow.com/a/27041899/15924734 , no está bien cambiar el atributo de ID. Para lo que necesita, puede usar addClass() , removeClass() & toggleClass()
También para elementos dinámicos puedes usar esto:
$(document).on("click", "#test-element", function() { console.log("clicked"); });