CODEWITHSUNDEEP
jqueryeventsclickblur
andyz
andyz

Reputation: 35

jQuery - appending an element to DOM on blur stops click event

newbie to the site and its helped me out heaps, but I haven't been able to find a solution to my current problem. If I missed it - please direct me.

I've got a form that uses jQuery to append a div tag for validation during the blur event which works great. However, if the button is clicked, the "click" event is dropped after the div is appended to DOM. I've been able to simplify the problem I'm having here: http://jsfiddle.net/rSy2w/

function log(msg) {
   $('#msgs').append('<br>').append('' + msg);
}

function onFocus() {
    log('focus');
}

function onBlur() {
    log('enter blur');
    addElement($(this));
    log('exit blur');
}

function continueOn() {
    log('continue click');
}

function addElement(field) {
    field.parent().append('<div class="message">New DIV Element</div>');
}

$(document).ready(function() {
    $('#myform input').focus(onFocus);
    $('#myform .field-text').on('blur','input', onBlur);
    $('#continue').click(continueOn);
});

I based this on a post here (Blur event stops click event) that got me part of the way, but not all the way.

Anyone have any ideas as to how to get the click event to be triggered?

Thanks!

Upvotes: 1

Views: 1340

Answers (1)

colestrode
colestrode

Reputation: 10658

I don't think the click event is being stopped... On blur, you add elements between the textbox and the button, so by the time you click, the button has been moved by the new elements.

If you add the elements after the button, you can see the click event being registered: http://jsfiddle.net/rSy2w/1/

Upvotes: 1

Related Questions