Jquery模糊运行两次 - 为什么

Question

我正在努力创建自己的成绩簿，它作为AJAX工作。 在其底部是带有可编辑单元格的表格。 用户单击单元格以输入成绩，当他们单击关闭单元格时，成绩将通过 AJAX 发送到数据库。 到目前为止，它工作正常，除了我添加了用户按 Enter 的功能，并让它就像用户单击其他地方以关闭编辑表单一样。

问题是，当用户点击回车键而不是输入时，模糊部分会运行两次，警报弹出两次所证明的那样。 如果他们只是点击某个地方，那很好。我对jQuery的.blur（）的理解是，如果你在没有回调或参数的情况下调用它，它会充当一个行动者，并把它当作选定的元素失去了焦点。

发生在IE8，Chrome和FF 4.0.1上。 在我的测试站点运行的实时版本

有人可以解释为什么当我尝试在用户点击回车时设置模糊时它运行两次吗？

更新：无法发布 HTML，因为它实际上只是一个表，并且表标签集不在 stackOverflow 白名单上。 （我是新来的，所以也许有办法做到这一点，但我不知道。

另外，我通过更改解决了眼前的问题

                if(event.keyCode=='13')
            {
                $('#gradeUpdate').blur();
            }

自

                if(event.keyCode=='13')
            {
                $("#gradeUpdate").parent().focus();
                //$('#gradeUpdate').blur();
            }

但我仍然想知道为什么原始线条不像我想象的那样 #gradeUpdate 模糊。

一切都发生在这个函数中：

function clickableCell(){
$("td.assignmentCell").click(function(){  //if a td with an assignment class is clicked,
    if( clicked == 0)
    {
        clicked = 1;
        currentValue = $(this).text();//get the current value of the entered grade
        var passable = this;
alert("Test:  passable is: "+$(passable).text());
    //change content to be an editable input form element
        $(this).html("<input name='gradeUpdate' id='gradeUpdate' size=3 value='"+currentValue+"' type='text' />");
    //move the cursor to the new input and highlight the value for easy deletion    
        $('#gradeUpdate').focus().select();  
    //watch for keystrokes somewhere else and act appropriately 
        $(document).keyup(function(event){
        //if they hit Enter, treat it like they clicked somewhere else
            if(event.keyCode=='13')
            {
                $('#gradeUpdate').blur();
            }
        });
        $('#gradeUpdate').blur(function(passable){
        //reset the clicked counter
            clicked = 0;
        //check to see if the value is blank or hasn't changed
            var inputValue = $('#gradeUpdate').val();
        //////////////////////////////////////////////////////////////////////////////////////////
        //  Here we need to insert a REGEX check for the "exception" values created by the GDST
        //  and check for those values; anything else that's not a number will be disallowed
        //  and reset to "" so that it's caught in a later step.  For now I'm just checking for digits
        //////////////////////////////////////////////////////////////////////////////////////////
        if(!inputValue.match(/^d+$/)) 
        { 
            alert ("we don't have a match!");
            inputValue = "";
        }
        ///////////////////////////////////////////////////////////////////////////////////////////
            if(currentValue == inputValue || inputValue =="")//hasn't changed or is blank
            {
                //DON'T run AJAX call
alert("Not a good value, reverting to old value!");
            //assign the original, unchanged value to the table
                $('#gradeUpdate').parent().text(currentValue) 
                $("#gradeUpdate").remove();//close out the input block
            //make it like they actually clicked on the element they did click on to lose focus
                $(this).click();
            }
            else //it's valid, send the ajax
            {
                //send AJAX call here
                //on success update the td
alert("We're all good--entering value!");
                $("#gradeUpdate").parent().text(inputValue);
                $("#gradeUpdate").remove();
            }
        });
    }//close of if clicked ==0
});
}

这是原始页面的完整 HTML; 它实际上只是一个表，其中包含一些用于测试的预先输入的值。 我的下一步是使用从 AJAX 请求返回的 XML 动态构建表。

Answer 1

我认为您需要从$('#gradeUpdate').blur()更改为$('#gradeUpdate')[0].blur().浏览器将采用与正常模糊不同的jQuery模糊。所以它会被触发两次。

Answer 2

我也有同样的事情发生在我身上，$('input')[0].blur();行以某种方式修复了它，但我不明白这是如何工作的。我的代码是：

$('h1 input').live('blur', function(){
    var text = $('h1 input').val();
    if(text == ''){
        alert('!');
        $('h1').html('<p>' + originalProjectName + '</p><span></span>');
        text = originalProjectName;
    }
    var id = document.location.hash.split('-')[1];
    $('h1').html('<p>' + text + '</p><span></span>');
    $.getJSON('json-project.php', { method: 'rename', id: id, name: text }, function(data) {
        var type = document.location.hash.split('-')[0];
        if(type == '#shoot'){
            $('#scroller-shoots ul li[data-id=' + id + ']').html(text); 
        }
        if(type =='#project'){
            $('#scroller-projects ul li[data-id=' + id + ']').html(text);
        }
    });
});
$('h1 input').live('keydown', function(event) {
    originalProjectName = $(this).val();      
    if ( event.which == 13 ) {
        $(this)[0].blur();
    }
});

这没有意义，因为$(this)应该只引用一个选择器，而不是多个。有谁知道为什么会这样？

Answer 3

每次单击td.assignmentCell时，您都会重新绑定blur并keyup事件。如果有意义，请尝试仅绑定一次，或者使用live或delegate进行#gradeUpdate。

用你的HTML更新你的问题，我可以更好地了解你在做什么。

Answer 4

我无法使用建议的解决方案解决此问题，因为输入上的模糊事件发生在窗口上的模糊事件之前（为什么，我还不太确定）。话虽如此，我能够关注这篇文章，并对其进行调整以检测用户鼠标何时离开窗口区域以忽略模糊事件。

示例代码：

var isTargetWindow = false;
function addEvent(obj, evt, fn) {
    if (obj.addEventListener) {
        obj.addEventListener(evt, fn, false);
    }
    else if (obj.attachEvent) {
        obj.attachEvent("on" + evt, fn);
    }
}
var isTargetWindow = false;
addEvent(window,"load",function(e) {
    addEvent(window, "mouseout", function(e) {
        e = e ? e : window.event;
        var from = e.relatedTarget || e.toElement;
        if (!from || from.nodeName == "HTML") {
            // stop your drag event here
            // for now we can just use an alert
            isTargetWindow = true;
        }
        else {
            isTargetWindow = false;
        }
    });
});
$(document).on( 'blur', 'input', function( e ) {
    if( isTargetWindow ) {
        return false;
    }
    // ... do something here
}