2010-09-03 95 views
9

Estoy tratando de editar el evento 'onchange' de un elemento 'select' existente.¿Cómo editar el atributo 'onchange' en una etiqueta 'select'? (usando jquery)

A modo de ejemplo tengo el siguiente código:

<select id="sel_id" onchange="javascript:foo();" > 

y siempre trato de cambiar su 'onchange' atributo que estaba usando la siguiente:

$("#sel_id").attr("onchange", "foo_2()"); 

su información, este código, los cuales estar bien no funciona, el atributo 'onchange' permanece sin cambios. Entonces, ¿cómo debería editarlo?

ENMIENDA:

Puede quitar el atributo y luego enlazar una función diferente como:

$("#sel_id").removeAttr("onchange").bind("change", function(){ foo_2(); }); 

pero el problema permanece, es posible cambiar el 'onchange' atributo sin sacarlo ¿en primer lugar?

Respuesta

17
No

una respuesta exacta a la pregunta, pero probablemente me quito el evento utilizando la siguiente:

document.getElementById('sel_id').onchange = undefined; 

(como se ve en How to Clear/Remove JavaScript Event Handler?)

y luego voy con esto:

$('#sel_id').change(function() { foo_2(); }); 
+0

Sí, esa es la respuesta correcta, estoy seguro que quitar el evento y unir mi propia utilizando jQuery. – vitorhsb

+1

'$ ('sel_id'). Attr ('onchange', undefined) .change (function() {foo_2();});' es la manera jQuery de hacerlo. De esta forma, puede hacer ambas operaciones con un objeto jQuery. – Muhd

+1

También OP probablemente podría hacer '.change (foo_2)' en lugar de envolver en una función anónima. – Muhd

3

Funciona para mí si uso el nativo setAttribute().

Además, recuerde que necesita cotizaciones alrededor del selector.

$("#sel_id")[0].setAttribute("onchange", "foo_2()"); 

Asimismo, recuerda a definir foo_2 en el espacio de nombres global, y no dentro de la función de jQuery .ready().

+0

Tienes razón, olvidé las comillas en el ejemplo, pero las usé en código real. (editó la pregunta) 'setAttribute()' debería ser la solución para la pregunta, pero en realidad tiene el mismo problema que presenté. Si se declara un atributo 'onchange' en el elemento, no se reemplaza y se desencadena el código de evento anterior. Además, prefiero usar una función de alcance interno en el evento onchange. Por lo tanto, puedo usar el código al que me refiero en la enmienda. – vitorhsb

+0

@vitorhsb: a partir de su adición a su pregunta, el problema persiste cuando se llama al 'foo()'. ¿Esto es en IE? Podría intentar establecer su propiedad 'onchange' en nulo:' $ ("# sel_id") [0] .onchange = null; '. No estoy seguro si eso ayudará, pero quizás valga la pena intentarlo. – user113716

+0

¡Esto es genial! Parece que hay un error en IE8 asociado con vincular un evento de cambio a una selección. He intentado casi todo (addEventListener, jQuery .change y .bind. Ninguno funcionó. Pero esto fue así. Gracias! –

2

Utilice la función de cambio de JQuery.

 
$('#sel_id').change(function() { 
    //your code 
}); 
+0

De esta forma todavía activa el evento de cambio declarado en la etiqueta de selección. – vitorhsb

+0

Luego usa $ ('# sel_id'). Unbind ('cambiar ') primero – jcubic

+1

'$ (' # sel_id '). unbind (' change ')' en realidad no elimina el evento previo declarado en la etiqueta html, solo elimina los eventos de vinculación declarados dinámicamente. – vitorhsb

0

Aquí está una manera de hacerlo usando sólo javascript:

<html> 
<head> 
<script type = "text/javascript" langauge="JavaScript"> 
function foo(){ 
    alert("foo"); 
} 
function fi() { 
    alert('fi'); 
} 
</script> 
</head> 
<body> 
<select id = "select_list" onchange="foo();"> 
<option value = "1">1</option> 
<option value = "2">2</option> 
</select> 
<input type = "button" value = "change" onclick = "document.getElementById('select_list').onchange = fi;"> 
</body> 
</html> 
Cuestiones relacionadas