jquery模糊運行兩次 - 爲什麼？

Question

我正在創建自己的作爲AJAX的成績冊。在它的底部有一個可編輯單元格的表格。用戶點擊單元格輸入等級，當他們點擊單元格時，等級通過AJAX發送到數據庫。到目前爲止，它工作的很好，除了我已經添加了用戶按Enter的功能並使用戶在其他地方單擊以關閉編輯表單時的行爲。

的問題是，當用戶點擊返回，而不是輸入，模糊部分運行兩次被警告彈出兩次證明。如果他們只是在某處點擊，那很好。 我對jQuery的.blur（）的理解是，如果您在沒有回調或參數的情況下調用它，它就像一個doer一樣，並將它看作是所選元素失去焦點。

適用於IE8，Chrome和FF 4.0.1。在my test site

現場運行的版本是否有人可以解釋爲什麼它的運行兩次，當我嘗試當用戶點擊進入設置模糊？

更新：無法發佈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

每當你點擊td.assignmentCell你正在重新編排blur和keyup事件。如果有意義，請嘗試將它們綁定一次，或者對於#gradeUpdate使用live或delegate。

用你的HTML更新你的問題，我可以更好地瞭解你在做什麼。

Answer 2

我認爲你需要改變從$('#gradeUpdate').blur()到$('#gradeUpdate')[0].blur()。瀏覽器將採用與正常模糊不同的jQuery模糊。所以它會被觸發兩次。

Answer 3

我不得不發生在我身上的同樣的事情，在$('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 4

我沒能把這個解決提出的方案爲在輸入窗口上的模糊事件之前發生blur事件（爲什麼，我不太肯定還）。話雖如此，我能夠遵循this post，並將其調整爲檢測用戶的鼠標何時離開窗口區域以忽略模糊事件。

示例代碼：

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 
}