Jquery blur laufen zweimal-warum?

Arbeite ich an der Erstellung meiner eigenen Notenbuch, das funktioniert wie AJAX. An seiner Basis eine Tabelle mit editierbaren Zellen. Benutzer klickt auf eine Zelle und geben Sie die grade, und wenn Sie klicken Sie auf aus der Zelle die Grad gesendet wird, um die DB via AJAX. So weit es funktioniert gut, außer, dass ich Hinzugefügt habe, in der Fähigkeit der Benutzer die Enter-Taste drücken und haben es zu handeln, als ob der Benutzer irgendwo geklickt anderes an schließen Sie das edit-Formular.

DAS PROBLEM IST, dass, wenn der Benutzer trifft zurückgeben, anstelle von enter, wird die Weichzeichnung Teil läuft doppelt so belegt die Warnung aufspringen zweimal. Wenn Sie klicken Sie einfach irgendwo, es ist in Ordnung.
Mein Verständnis von jQuery .blur() ist, dass, wenn Sie nennen Sie es, ohne einen Rückruf oder Argumente, die es fungiert als Macher und als behandelt, wenn das ausgewählte element den Fokus verloren.

Passiert auf IE8, Chrome und FF 4.0.1. Live-version läuft bei meine test-site

Kann mir bitte jemand erklären, warum es läuft zweimal, wenn ich versuchen, die Unschärfe, wenn der Benutzer trifft eintragen?

UPDATE: nicht erlaubt, Kann die HTML -, denn es ist wirklich nur ein Tisch und der Tisch-tag-set ist nicht auf stackOverflow auf der weißen Liste. (Ich bin neu hier, also vielleicht gibt es einen Weg, es zu tun, aber ich weiß es nicht.)

Auch, ich löste das unmittelbare Problem durch ändern

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

zu

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

aber ich würde immer noch gerne wissen, warum sich das original-line ist nicht nur #gradeUpdate zu verwischen, wie ich dachte, es würde.

Alles passiert innerhalb dieser Funktion:

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
});

}

hier der vollständige HTML-Code der original-Seite; es ist wirklich nur eine Tabelle mit einigen pre-Werte für die Prüfung zu verwenden. Mein Nächster Schritt ist das erstellen der Tabelle on the fly mit XML-Code zurückgegeben wird von einem AJAX-request.

InformationsquelleAutor jcanker | 2011-05-14
Schreibe einen Kommentar