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.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ich glaube, Sie brauchen, um zu ändern, von
$('#gradeUpdate').blur()
zu$('#gradeUpdate')[0].blur()
. Der browser wird die jQuery-Unschärfe unterscheidet sich von der normalen Unschärfe. Also es wird zweimal gezündet.Ich hatte das gleiche passiert mir, der
$('input')[0].blur();
Linie irgendwie behoben, aber ich verstehe nicht, wie das funktioniert. Mein code ist:Es ist nicht sinnvoll, da
$(this)
sollte, beziehen sich nur auf ein Selektor, nicht mehrere. Weiß jemand, warum das funktioniert?Everytime, das Sie klicken Sie auf
td.assignmentCell
du bist neubindung derblur
undkeyup
Veranstaltungen. Versuchen Sie binden, nur einmal, ob es Sinn macht oder mitlive
oderdelegate
für#gradeUpdate
.Aktualisieren Sie Ihre Fragen mit Ihrem HTML-und ich kann eine bessere Idee, was Sie tun.
$(x).click(function() {/*...*/})
sind Sie verbindlich einen neuen click-handler. Ebenso für$(x).blur(function)
und es sieht aus wie dieblur
erhalten gebunden mehrere Male, auch wenn derclick
nicht.War ich nicht in der Lage, diese gelöst mit der vorgeschlagenen Lösung, wie Sie den blur-event auf der Eingangs ausgeführt wurde, bevor der blur-Ereignis auf dem Fenster (warum bin ich noch nicht ganz sicher). Das sagte, ich war in der Lage zu Folgen dieser Beitrag, und es angepasst, um zu erkennen, wenn der Benutzer die Maus verlässt den Bereich zu ignorieren, das blur-event.
Beispiel-code: