Question

I have the following html code:

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

I want to detect when the input changes and perform an operation in this case, but ONLY when the user has not clicked in the link. I have tried this:

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

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

However change is always executed before click when the value in the input changed, due to Javascript event precedence rules, and therefore only “change” message is displayed.

I would like it to display change only if the input value changed and the user exited the input clicking in any other place instead of the link. In that last case I would like to display click.

The example is here.

I use jQuery 1.6.4.

Answer 1

As far as I know, the click event fires after the blur and change events in every browser (have a look at this JSFiddle). The order of blur and change is different across browsers (source: Nicholas Zakas).

To solve your problem, you could listen to click events on the document and compare the event’s target with #theLink. Any click event will bubble up to the document (unless it is prevented).

Try this:

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/