开发者

jQuery .focus (on field X) causes .blur (on field X) to get invoked

开发者 https://www.devze.com 2023-03-06 02:28 出处:网络
Does anyone know why the jQuery .focus function would cause an onblur event to get called.The reason I ask is because in my JavaScript custom psuedo class, I am calling this.

Does anyone know why the jQuery .focus function would cause an onblur event to get called. The reason I ask is because in my JavaScript custom psuedo class, I am calling this.

jQuery(thisTemp.Elements.TxtSampleId).blur(Function.createDelegate(thisTemp,     
    thisTemp.PreAccessioningLoad));

But inside of the success JavaScript function (in this same class) for my AJAX call to my WCF service, I have this code. The *.focus line is causing another instance of my delegate above to get called. I can prove this by commenting it out. With the line, my alert gets called twice. Without it, my alert only gets called once.

PreAccessioningLoadSuccess: function(quickDataEntryObject) {

    var val = jQuery(this.Elements.TxtSampleId).val().replace(/^\s\s*/, "").replace(/\s\s*$/, "");
    var intRegex = /^\d{1,10}$/;
    if (!intRegex.test(val)) {
        jQuery(this.Elements.SampleIdAjaxValidate).html("<span style='color:red'>Sample Id must contain between 1 and 10 digits</span>");
        jQuery(this.Elements.TxtSampleId).focus();
        jQuery(this.Elements.ImageAjaxSpinner).css("visibility", "hidden");
        alert("this alert gets called twice when .focus() function called ???");
        return false;
    }
    else {
        jQuery(this.Elements.SampleIdAjaxValidate).html("");  // clear AJAX validation
    }

...

Why would that happen?

============ Here is my delegate event per the request:

PreAccessioningLoad: function(sender) {

    if (this.Elements.TxtSampleId.value != "") {

        var service = new Acu.LIMS.UI.Web.WCFServices.Accessioning.QuickDataEntryService();
        jQuery(this.Elements.ImageAjaxSpinner).css("visibility", "visible");
        service.PreAccessioningLoad(this.Elements.TxtSampleId.value, Function.createDelegate(this, this.PreA开发者_开发技巧ccessioningLoadSuccess), Function.createDelegate(this, this.PreAccessioningLoadError));
    }
    return false;  //prevent page postback
},

========================================= Adding my source code:

<asp:TextBox id="TxtSampleId" runat="server" class="LIMSInputField" onfocus="Change(this, event)" onblur="Change(this, event)"/>

<script type="text/javascript">

    function Change(obj, evt) {
        if (evt.type == "focus") {
            obj.style.borderColor = "black";
            obj.style.backgroundColor = "#90EE90";  // light green on focus
        }
        else if (evt.type == "blur") {
            obj.style.borderColor = "white";
            obj.style.backgroundColor = "#7AC5CD";  // light blue on blur
        }
    }

</script>


Sounds like the issue is that the alert fires the blur (as it is now receiving the focus):

alert("this alert gets called twice when .focus() function called ???");

See:

http://jsfiddle.net/on50g7cr/2/

If you tab to the "focuser" button and then click "click me!" you'll see that the blur event is fired twice (once for losing focus to the "click me" button and then again for losing focus to the alert window).

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号