Question

我有一个包含多个输入字段的表单。当点击输出字段时，我正在使用模糊函数来触发AJAX请求：

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

但是，我还使用DIV和jQuery构建了一个自定义的“选择菜单”，如下所示：

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

如何模拟“模糊”，以便当我的自定义选择菜单中的值发生变化时，AJAX请求会像通常输入一样触发？

Answer 1

您可以使用trigger()：

以编程方式触发元素上的事件

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

所以在你的代码中，它将是：

$(".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");
});

Answer 2

你已经在click事件上有一个监听器，只需将ajax添加到底部吗？

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

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

function doAjaxStuff() {
    $.ajax({
       // etc
    });
}

Answer 3

您可以创建自定义事件customMenuChanged，并在更改值时触发它。

$(".currentMenu li").click(function(e){
    e.preventDefault();
    var $prev = $(this).closest(".currentMenu").prev();

    //Check if the value actually changed or same item is selected
    if($prev.text() != $(this).text()){
         $(document).trigger('customMenuChanged', $(this).text());
    }

    $prev.html($(this).text() + '<span class="dd-arrow"></span>');
});

$(document).bind('customMenuChanged', function(e, data){
     alert("Menu changed " + data);
     //Code here to make ajax request
});

您可以将事件绑定到您想要的任何元素并触发它。

工作演示 - http://jsfiddle.net/gWS2L/6/

关于输入AND div类的jQuery .blur

3 个答案: