Estoy tratando de obtener el valor de un botón recién agregado, sin embargo, siempre registra indefinido o nada. He probado muchos métodos, como .val(), .textContent y .value, como los encontré aquí.
Aquí está mi código.
}).done(function (response) { var lat = response.data[0].latitude; var long = response.data[0].longitude; //Appends new button based on recent search searchHistory.append(`<button class="col-12 btn border-info m-1" id="prevSearch">${textInput.val().toLowerCase().split(' ').map((s) => s.charAt(0).toUpperCase() + s.substring(1)).join(' ')}</button>`); var previousSearch = $("#prevSearch"); previousSearch.on('click', () => { console.log($(this).val(); console.log(document.getElementById("prevSearch").textContent); }) }) El primer registro bajo la función de clic devuelve indefinido, mientras que el segundo devuelve el contenido real. Sin embargo, solo funciona con el primer botón que se adjunta cuando intento un console.log("test") .
Entonces, en resumen, tengo 2 problemas, no puedo obtener el valor del botón y solo el primer botón funciona cuando se prueba con un registro de consola simple.
Cualquier ayuda sería muy apreciada.
Estás recibiendo el botón por ID. Si está agregando varios elementos con la misma ID, eso no funcionará, ya que las ID deben ser únicas dentro del documento.
En cuanto al valor de su botón, diría que solo use $(this).text() . La compatibilidad del navegador con el contenido del elemento como HTMLButtonElement.value tiene un historial irregular.
Yo solo usaría lo siguiente
const button = $("<button>", { type: "button", "class": "prevSearch col-12 btn border-info m-1", text: textInput.val().replace(/(^| )[az]/g, c => c.toUpperCase()) }).appendTo(searchHistory) button.on("click", function() { console.log($(this).text()) })También puede mover el manejo de eventos a un controlador delegado fuera de este código que pueda manejar todos los clics de botón actuales y futuros.
searchHistory.on("click", ".prevSearch", function() { console.log($(this).text()) })