0

estoy teniedo un problema al momento de cojer el dato de un data-id con data de javascript, lo que quiero intentar si tengo varios botones por decirlo que cada botón tenga un valor diferente hasta ahí esta bien pero al momento de llamar cada botón con valores diferentes me llama el primero.

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="button1" data-id="sa!" onclick="funcionData()"> click1 </button>
<button type="button" id="button1" data-id="sasasa!" onclick="funcionData()"> click2 </button>
<script type="text/javascript">
function funcionData(){
alert($("#button1").data("id"));
}
</script>
</body>
</html>

les dejo el ejemplo algo como quiero hacer si ven en el boton uno como el atributo data-id="sa!" y el boton 2 con click2 con el data-id=sasasa" pero al momento de llamarlo solo me retorna el primero y no el segundo

1
  • Tienes el mismo id para los 2 botones, cada id debe ser diferente, puedes crear un evento click para tus botones y que ejecute una función donde obtengas el valor de data-id el 6 feb. 2020 a las 15:40

2 respuestas 2

2

Error de conceptos, el ID es un identificador único, si vas a tener diferentes elementos debes usar clases.

Podrías pasar el elemento donde se realiza el evento, mediante this en el html

function funcionData(el){
  alert($(el).data('id'));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="button1" data-id="sa!" onclick="funcionData(this)"> click1 </button>
<button type="button" id="button2" data-id="sasasa!" onclick="funcionData(this)"> click2 </button>

La forma que recomendaría sería crear una clase y asignar un listener para esta clase botones para el ejemplo, this hará referencia al elemento donde se produce el evento, click para este caso.

$(document).on('click','.botones',function(){
   alert($(this).data('id'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button"  class="botones" data-id="sa!" > click1 </button>
    <button type="button"  class="botones"  data-id="sasasa!" > click2 </button>

0

En primer lugar no debes de tener dos elementos con ids iguales. El id debe de ser unico en todo el dom. En segundo lugar, debes de pasar el objeto a la funcion para poder reconocer que boton fue el que fue presionado. La forma correcta seria asi:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="button1" data-id="sa!" onclick="funcionData(this)"> click1 </button>
<button type="button" id="button2" data-id="sasasa!" onclick="funcionData(this)"> click2 </button>
<script type="text/javascript">
function funcionData(boton){
alert($(boton).data("id"));
}
</script>
</body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.