mi código jquery no funciona en mi campo dinámico en este formulario que se agrega después de cargar la página:
agrego esta api para jquery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>mi formulario html:
<form method="post" class="row g-3 my-4 px-3 needs-validation" novalidate> {% csrf_token %} <!-- Job --> <div class="col-lg-8 job_field"> <label for="job" class="form-label fw-bold">Job</label> <div class="input-group"> <input type="text" class="rounded-3 form-control" id="job" placeholder="example: Dentist" value="Dentist" name="job" required> <span class="add_job cursor input-group-text rounded-3 bg-Goldenrod mx-3 bg-gradient">+ Add Another Job</span> </div> </div> <!-- Job --> <!-- Save Change Button--> <div class="col-12 mt-5"> <button class=" col-12 py-2 col-md-3 btn btn-Goldenrod bg-gradient fw-bold" type="submit"> Save Change </button> </div> <!-- Save Change Button--> </form>mi codigo jquery:
<script> $('.add_job').click(function () { $('.job_field').append('<div class=" another_job input-group mt-3"> <input type="text" class="rounded-3 form-control" id="job" placeholder="example: Dentist" name="job" required><span id = "remove" class="cursor input-group-text rounded-3 bg-danger mx-3 bg-gradient">- Remove</span></div>'); }); $('#remove').click(function () { $(this).parent.addClass('d-none') }); </script>mi botón "+agregar otro trabajo" funciona correctamente... pero mi botón "-Eliminar" que se agrega después de cargar la página no funciona.
No puede usar la identificación varias veces en la página, jQuery solo entenderá la primera identificación. Debe agregar una clase para eliminar/ocultar fila. También debe inicializar el evento de clic de eliminar después de todas las adiciones nuevas:
Ver código de ejemplo:
<script> $('.add_job').click(function () { $('.job_field').append('<div class=" another_job input-group mt-3"> <input type="text" class="rounded-3 form-control" id="job" placeholder="example: Dentist" name="job" required><span id="remove" class="cursor input-group-text rounded-3 bg-danger mx-3 bg-gradient remove_record">- Remove</span></div>'); $('.remove_record').click(function () { $(this).parent("div").addClass('d-none') }); }); </script>