Un amigo tiene un sitio en una plataforma donde no podemos acceder al código fuente pero podemos agregar nuestro propio JavaScript. Partes del sitio se cargan con Ajax.
Necesito agregar un elemento cuando se carga una parte particular de HTML. Hasta ahora he encontrado:
$(document).ajaxComplete(function() { $('.booking .simple_form input[type="submit"]').hide(); $('.booking .simple_form').append('<a id="login-btn" href="#">Login</a>'); });Pero debido a que hay 4 piezas de contenido cargadas por Ajax en la página, este elemento se agrega 4 veces.
Intenté envolver eso en una declaración if, por ejemplo:
$(document).ajaxComplete(function() { if ($('#login-btn').length) { $('.booking .simple_form input[type="submit"]').hide(); $('.booking .simple_form').append('<a id="login-btn" href="#">Login</a>'); } });Pero esto no funciona, no aparece nada.
¿Alguien sabría cómo puedo agregar 1 botón?
Tu condición es incorrecta.
if ($('#login-btn').length) { $('.booking .simple_form input[type="submit"]').hide(); $('.booking .simple_form').append('<a id="login-btn" href="#">Login</a>'); }Debiera ser
if (!$('#login-btn').length) { $('.booking .simple_form input[type="submit"]').hide(); $('.booking .simple_form').append('<a id="login-btn" href="#">Login</a>'); } Cuando no hay elementos, hay que marcar el falso y luego entrar. añadir ! ante su condición.