關注jQueryUI中的第一個表單元素對話框

我有一個登錄表單，通過AJAX獲取，我想在jQuery UI對話框中顯示，並希望第一個輸入字段具有自動對焦。我已經使用下面的代碼工作，但我覺得它是相當黑客，並認爲應該有一個更好的解決方案。此外，Chrome 23，IE9和Firefox 16的行爲似乎一致，所以我想借此機會對這些內容有更深入的瞭解，並希望有人願意闡明一些看法。關注jQueryUI中的第一個表單元素對話框

我在這裏和其他地方發現了許多相關的問題，但沒有一個提出的答案似乎對我有用。奇怪的是，許多問題都出現在相反的問題上。即消除自動對焦...

表格提取等由鍵Alt+l使用jQuery Hotkey插件觸發。第一個輸入元素具有id'user'。該代碼是

$(document).bind('keydown', 'Alt+l', function() { 
    $('<div>', { 
     title: 'Log in' 
    }).load('?action=login').dialog({ 
     modal: true, 
     show: 'fade', 
     hide: 'fade', 
     resizable: false, 
     draggable: false, 
     open: function (e) { 
      // Hack alert! 
      setTimeout(function() { 
       $('input:first', e.target).focus(); 
      }, 100); 
     } 
    }); 
    //$('#user').focus(); <- won't work; $('#user').length == 0 
});

我不明白的事情是爲什麼我必須把focus()叫了暫停裏面這個工作。如果選擇未被超時延遲，則選擇$('input:first', e.target)（或等價物，註釋掉，$('#user')）爲空。

如果任何人都可以解釋這種行爲，或者可能提供更好的解決方案，將不勝感激！

更新

取出的HTML是隻是一個普通的形式

<form action="?action=login" method="post"> 
    <table> 
     <tr><td><label for="user">Username:</label> 
      <td><input id="user" type="text" name="user"> 
     <tr><td><label for="pass">Password:</label> 
      <td><input id="pass" type="password" name="pass"> 
     <tr><td><td><input type="submit" value="Log in"> 
    </table> 
</form>

注意，在URL ?action=login的響應是GET不同，POST請求

來源

2012-12-01 Halle Knast

你可以舉個實際的例子嗎？ –

嗨哈莉。請發佈您的HTML以及。 –

我認爲這個問題是我創造的對話太ealy;在load之前完成。所以移動對話框代碼的回調裏面load作品，未經延遲：

$(document).bind('keydown', 'Alt+l', function() { 
    $('<div>', { 
     title: 'Log in' 
    }).load('?action=login', function() { 
     $(this).dialog({ 
      modal: true, 
      show: 'fade', 
      hide: 'fade', 
      resizable: false, 
      draggable: false, 
      open: function() { 
       $('input:first', this).focus(); 
      } 
     }); 
    }); 
});

我認爲load是同步的，並且它因此不會身在何處的選擇$('input:first', this)作出，但似乎並沒有被案子。

也可能是所有需要的是將選擇放置在一個單獨的事件中，以便在完成事件處理包含load之後DOM正確更新。在這種情況下，這兩種解決方案基本上是等價的，除了前者是醜陋的黑客，後者不是這樣。

如果任何這是胡說，請不要猶豫，糾正我。

來源

2012-12-01 15:01:20

關注jQueryUI中的第一個表單元素對話框

回答

相關問題