evento Change preferencia con jQuery

Question

tengo el siguiente código html:

<input type="text" id="theInput" value=""/>  
<a href="#" id="theLink">Click me</a> 

Quiero detectar cuando los cambios de entrada y llevar a cabo una operación en este caso, pero sólo cuando el usuario no ha hecho clic en el enlace. He intentado esto:

$('#theLink').live('click', function(){ 
    alert('click'); 
}); 

$('#theInput').live('change', function(){ 
    alert('change'); 
}); 

Sin embargo change siempre se ejecuta antes de click cuando el valor de la entrada cambia, debido a las reglas de precedencia caso de Javascript, y por lo tanto sólo se muestra el mensaje "cambio".

Me gustaría mostrar change solo si el valor de entrada cambió y el usuario salió de la entrada haciendo clic en cualquier otro lugar en lugar del enlace. En ese último caso, me gustaría mostrar click.

El ejemplo es here.

Yo uso jQuery 1.6.4.

Answer 1

Por lo que yo sé, los click desencadena el evento después de las blur y change eventos en todos los navegadores (echar un vistazo a this JSFiddle). El orden de blur y change es diferente en todos los navegadores (fuente: Nicholas Zakas).

Para resolver su problema, puede escuchar los eventos click en el documento y comparar el objetivo del evento con #theLink. Cualquier evento de clic se disparará hasta el documento (a menos que se lo impida).

Prueba esto:

var lastValue = ''; 

$(document).click(function(event) { 
    var newValue = $('#theInput').val(); 

    if ($(event.target).is('#theLink')) { 
     // The link was clicked 
    } else if (newValue !== lastValue) { 
     // Something else was clicked & input has changed 
    } else { 
     // Something else was clicked but input didn't change 
    } 

    lastValue = newValue; 
}); 

jsFiddle: http://jsfiddle.net/PPvG/TTwEG/

Answer 2

Ok, ahora lo tengo, se puede hacer

$('#theLink').live('click', function(e){ 
    alert('click'); 
}); 

$('#theInput').live('change', function(e){ 
    //Check if the change events is triggerede by the link 
    if(e.originalEvent.explicitOriginalTarget.data === "Click me"){ 
     //if this is the case trigger the click event of the link 
     $('#theLink').trigger("click"); 
    }else{ 
     //otherwise do what you would do in the change handler 
     alert('change'); 
    } 
}); 

violín aquí http://jsfiddle.net/hTqNr/19/

Answer 3

por qué no recoger el valor del cuadro de entrada. usted tiene que almacenar el valor inicial del cuadro de entrada en función de listas

initialvalue= $('#theInput').val(); 

luego comparar el valor

$('#theLink').live('click', function(){ 
    var newvalue =$('#theInput').val(); 
     if(newvalue!=initialvalue) { 
      //do something 
     } 

    }); 

Answer 4

Ambos eventos dispararán, pero en su ejemplo la alerta en el controlador onchange caso despedido cuando el evento onmousedown ocurre detendrá el evento onmouseup requerido para el evento onclick para disparar. El uso de console.log mostrará la activación de ambos eventos.

http://jsfiddle.net/hTqNr/4/