Question

I have a form with multiple input fields. I’m using a blur function to trigger an AJAX request when ever an input field is clicked out of like so:

$(".innerItems input").blur(function() {
    $.ajax({
        // etc
    });
});

However, I’ve also built a custom “select menu” using DIVs and jQuery like so:

http://jsfiddle.net/tctc91/gWS2L/

How can I simulate a “blur” so that when the value changes in my custom select menu, the AJAX request is triggered like it normally would if it were an input?

Answer 1

You can trigger events on elements programatically by using trigger():

$(".innerItems input").trigger("blur");

So in your code, it would be:

$(".currentMenu li").click(function(e){
    e.preventDefault();
    $(this).closest(".currentMenu").prev().html($(this).text());
    $(this).closest(".currentMenu").prev().append('<span class="dd-arrow"></span>');
    $(".innerItems input").trigger("blur");
});