jQuery的AJAX大干快上的负载，而不是在模糊解雇 [英] jquery ajax gets fired on load instead of on blur

问题描述

我有一个名为applyToDetailRows功能，这是我的呼吁负载，以及当我的页面的输入部分被通过AJAX重新绘制。此功能，附加一堆事件到拿得出输入字段。一个在现场的事件是模糊的，这将触发Ajax调用来获取学生信息。问题是模糊的ajax触发器触发每次在网页加载时间为每个字段，而不是发射的上模糊。而如果函数applyToDetailRows的内部定义这只是发生。如果我拉出来applyToDetailRows的，它工作正常。

有一点要注意的是，我也有自动完成在类似的方式applyToDetailRows定义的，它工作正常。但不是这个。

 函数applyToDetailRows（）{
        $（：输入[数据getstudent]）。每个（函数（）{
            $（本）。在（'模糊'，函数（）{
                VAR ELEM =这一点;
                $阿贾克斯（{
                    网址：$（ELEM）.attr（'数据getstudent'），
                    数据类型：JSON
                    数据：{
                        studentNumber：$（ELEM）.VAL（）
                    }，
                    成功：函数（结果）{
                    }
                }）;
            }）;
        }）;
    }/ *一些其他的定义* /// applyToDetailRows叫applyToDetailRows（）;
 

解决方案

您将preFER每个请求后使用事件委派，而不是重新应用的功能，因为它可能是你绑定错或超过一次。

 的$（document）。在（模糊，：输入[数据getstudent]功能（）{
  / * * AJAX /
}）;
 

您可以替换文件所有的输入元素是DOM树更接近一个共同的父他们比它。

I have a function called applyToDetailRows, which I call on load, as well as when the input section of my page gets re-drawn via ajax. this function, attaches a bunch of events to the input fields that get drawn. One of the events on a field is blur, which triggers an ajax call to fetch student info. The problem is that the blur ajax trigger fires every time the page loads for each field, rather than firing on blur. And this only happens if the function is defined inside of applyToDetailRows. If I pull it out of applyToDetailRows, it works fine.

one thing to note is that I also have auto-complete defined in applyToDetailRows in the similar manner, and it works fine. But not this.

    function applyToDetailRows() {
        $(":input[data-getstudent]").each(function() {
            $(this).on('blur', function () {
                var elem = this;
                $.ajax({
                    url: $(elem).attr('data-getstudent'),
                    dataType: "json",
                    data: {
                        studentNumber: $(elem).val()
                    },
                    success: function (result) {
                    }
                });
            });
        });
    }

/* some other definitions */

//applyToDetailRows called

applyToDetailRows();

解决方案

You would prefer to use event delegation instead of re-applying the function after each request since it is possible you may be binding it wrong or more than once.

$(document).on("blur", ":input[data-getstudent]", function(){
  /* AJAX */
});

You can replace document with a common parent of all the input elements that is closer in the DOM tree to them than it.

这篇关于jQuery的AJAX大干快上的负载，而不是在模糊解雇的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！