1

Tengo una tabla que en cada fila tiene botones uno de estos es eliminar y ahí en le pongo como atributo una ruta = "", al hacer click en el botón quiero que me muestre este valor pero me aparece

undefined

function eliminarMenu(cod) {
    var url = $(this).attr('ruta');
    console.log(url);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button  id="eliiminarMenu" name="eliiminarMenu"  data-toggle="tooltip" title="ELIMINAR" onclick="eliminarMenu();" ruta="{{URL::to('menu/eliminar')}}/{{$menu->idMenu  }}" class="btn btn-outline btn-danger"><i class="fa fa-trash"></i></button>

Cuando veo en el inspector del navegador el atributo ruta me sale correctamente lleno

2 respuestas 2

1

ya que usas jquery, evita el uso onclick y agrega el evento click de jQuery

html

<button  id="eliiminarMenu" name="eliiminarMenu"  data-toggle="tooltip" title="ELIMINAR" ruta="{{URL::to('menu/eliminar')}}/{{$menu->idMenu  }}" class="btn btn-outline btn-danger"><i class="fa fa-trash"></i></button>

jquery

$('#eliiminarMenu').click(function(){
    var url = $(this).attr('ruta');
    console.log(url);
});  

Saludos

0

Para complementar del porque el codigo original no funciona:

Cuando agregas un atributo onclick en el contenido HTML automaticamente estas creando una funcion anonima que ejecuta el contenido de lo que agregas en el atributo. Dicha funcion anonima recibe this como el elemento actual, pero para las funciones invocadas this corresponde al objeto Window

En el codigo siguiente el boton eliiminarMenu2 ejecuta eliminarMenu.call(this) efectivamente cambiando el contexto de ejecucion al esperado por la funcion.

Mientras que el boton eliiminarMenu3 agrega un event handler de forma manual, apuntando a la funcion eliminarMenu directamente, sin intermediarios.

function eliminarMenu(cod) {
    console.log("this es ", this.toString());
    var url = $(this).attr('ruta');
    console.log(url);
}

document.getElementById("eliiminarMenu3").onclick=eliminarMenu;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button  id="eliiminarMenu" name="eliiminarMenu"  data-toggle="tooltip" title="ELIMINAR" onclick="eliminarMenu();" ruta="{{URL::to('menu/eliminar')}}/{{$menu->idMenu  }}" class="btn btn-outline btn-danger"><i class="fa fa-trash"></i>Button</button>

<button  id="eliiminarMenu2" name="eliiminarMenu"  data-toggle="tooltip" title="ELIMINAR" onclick="eliminarMenu.call(this);" ruta="{{URL::to('menu/eliminar')}}/{{$menu->idMenu  }}" class="btn btn-outline btn-danger"><i class="fa fa-trash"></i>Button con this</button>

<button  id="eliiminarMenu3" name="eliiminarMenu"  data-toggle="tooltip" title="ELIMINAR" ruta="{{URL::to('menu/eliminar')}}/{{$menu->idMenu  }}" class="btn btn-outline btn-danger"><i class="fa fa-trash"></i>Button con event handler manual</button>

Tu Respuesta

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

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