¿Cómo eliminar "onclick" con JQuery?


100

Código PHP:

<a id="a$id" onclick="check($id,1)" href="javascript:void(0)"  class="black">Qualify</a>

Quiero eliminar el onclick="check($id,1)para que no se pueda hacer clic en el enlace o " check($id,1)no se activará. ¿Cómo puedo hacerlo con JQuery?"

Respuestas:


238

Old Way (anterior a 1.7):

$("...").attr("onclick", "").unbind("click");

Nueva forma (1.7+):

$("...").prop("onclick", null).off("click");

(Reemplazar ... con el selector que necesita).


26
¿No debería ser removeAttr ('onclick')?
Roatin Marth

Sí, buen punto, podría ser más limpio, pero no estoy seguro de que sea diferente desde el punto de vista de la ejecución.
glmxndr

6
Con jQuery 1.7+ puede usar on / off: stackoverflow.com/questions/209029/…
Lance Cleveland

6
Ver el primer comentario en removeAttr api.jquery.com/removeattr Removing an inline onclick event handler using .removeAttr() doesn't achieve the desired effect in Internet Explorer 6, 7, or 8. To avoid potential problems, use .prop() instead
andyface

2
@andyface sí, eso está en la documentación, pero también tuve que usar .prop()para IE11.
onewo12

58

Sé que esto es bastante antiguo, pero cuando un extraño perdido encuentra esta pregunta buscando una respuesta (como lo hice yo), esta es la mejor manera de hacerlo, en lugar de usar removeAttr ():

$element.prop("onclick", null);

Citando el doku oficial de jQuerys :

"La eliminación de un controlador de eventos onclick en línea con .removeAttr () no logra el efecto deseado en Internet Explorer 6, 7 u 8. Para evitar problemas potenciales, use .prop () en su lugar"


1
Descubrí que esta es la mejor forma de eliminar un evento de clic cuando lo ha escrito así. <span onlick="method()">sometext>/span>El evento no está vinculado por completo y funciona muy bien
zdarsky.peter

3
No creo que esta sea la mejor manera. jsfiddle.net/TN2wr vs jsfiddle.net/TN2wr/1
Gus

Estoy usando un JQ anterior a 1.6, por lo tanto, $ (element) .attr ('onclick', null); funciona para mi.
metamagikum

18

Eliminar onclickpropiedad

Suponga que agregó su evento de clic en línea, así:

<button id="myButton" onclick="alert('test')">Married</button>

Luego, puede eliminar el evento de esta manera:

$("#myButton").prop('onclick', null); // Removes 'onclick' property if found

Eliminando clickdetectores de eventos

Suponga que agregó su evento de clic definiendo un detector de eventos, como este:

$("button").on("click", function() { alert("clicked!"); });

... o así:

$("button").click(function() { alert("clicked!"); });

Luego, puede eliminar el evento de esta manera:

$("#myButton").off('click');          // Removes other events if found

Quitando ambos

Si no está seguro de cómo se agregó su evento, puede combinar ambos, así:

$("#myButton").prop('onclick', null)  // Removes 'onclick' property if found
              .off('click');          // Removes other events if found

17

si está usando jquery 1.7

$('html').off('click');

más

$('html').unbind('click');


5

Después de esforzarme tanto con bind, unbind, on, off, click, attr, removeAttr, prop, lo hice funcionar. Entonces, tengo el siguiente escenario: En mi html NO he adjuntado ningún controlador onclick en línea.

Luego, en mi Javascript, utilicé lo siguiente para agregar un controlador onclick en línea:

$(element).attr('onclick','myFunction()');

Para eliminar esto en un momento posterior de Javascript, utilicé lo siguiente:

$(element).prop('onclick',null);

Esta es la forma en que funcionó para mí vincular y desvincular eventos de clic dinámicamente en Javascript. Recuerde NO insertar ningún controlador onclick en línea en sus elementos.


Me gusta esto, pero ¿por qué uno sería prop y el otro attr?
Stachu

No estoy seguro, pero la forma en que veo esto es que con attr agrega / inyecta el controlador onclick con el myFunction () correspondiente y el prop ('onclick', null) elimina el atributo, por lo que no se llamará a ninguna función. Esta es la forma en que funcionó para mí. Y pude notar cómo el elemento tenía un controlador onclick a través de attr y cómo se eliminó después de prop.
bboydflo

1
Para referencia futura, debe ser realmente usando .on('click', myFunction)(nota que myFunctiones no entre comillas) y luego, más tarde,.off('click')
JDB aún recuerda Mónica

1

¿Qué pasa si el evento onclick no está directamente en el elemento, sino en el elemento principal? Esto debería funcionar:

$(".noclick").attr('onclick','').unbind('click');
$(".noclick").click(function(e){
    e.preventDefault();
    e.stopPropagation();
    return false;
});

Agregar otro oyente de clics (para evitar el valor predeterminado, etc.) podría agregarlo al final de la lista de oyentes y, por lo tanto, los otros oyentes aún se ejecutarían primero. Sin embargo, no estoy seguro de si se agrega primero o último a la lista. De todos modos, es mejor usar 'apagado' como se ve en otras respuestas.
Frederic Leitenberger

0

Pruebe esto si desvincula el evento onclick por ID. Luego use:

$('#youLinkID').attr('onclick','').unbind('click');

Intente esto si desvincula el evento onclick por Class Luego use:

$('.className').attr('onclick','').unbind('click');
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.