如何創建與jQuery（或香草JS）

的許多事物一樣在標籤新的輸入，我的問題是最好用圖片解釋： http://gyazo.com/f7df971c91a5ab4a4969d12f4c5f32b6.png?1329575807 如何創建與jQuery（或香草JS）

當用戶是在最後一個字段中的每一列，我想要一個新的輸入，當他們按下tab鍵時在當前輸入下面彈出（類似於Quizlet所做的）。

我對jQuery沒有太多的經驗，有人能幫我一把，還是指出我的方向正確？

編輯：因此，這裏是我目前有：

$(document).ready(function(){ 
$('section#attendance input:last').keydown(function(e) { 
    if (e.which == 9) 
    { 
     var $this = $(this); 
     var num = parseInt($this.attr('name').match(/\d+(,\d+)?/)[0]) + 1; 
     $this.parent().append('<input type="text" name="attendance[' + num +']" value="Name and Position" class="medium" />'); 
    } 
});

}）;

出於某種原因，在它創建第一個新輸入之後，它不會爲該選項卡觸發器使用該新輸入，而是使用之前使用的輸入。任何想法爲什麼？

來源

2012-02-18 chintanparikh

關於您的編輯：這將是因爲你附加的事件處理程序（即'keydown'）爲您刪除的元素，但不給你加一個。在下面的答案中看到使用'live'來解決這個問題。 – sje397 2012-02-26 09:26:49

function KeyDown(e) { 
    if (e.which == 9) { // tab 
     // Do your stuff 
    } 
} 

$(document).keydown(KeyDown);

就你而言，你可能不想綁定到文檔，而是綁定到最後一個元素。或者您可以在處理程序方法中進行重點檢查。

來源

2012-02-18 14:54:43 Tesserex

檢測是問題的第一部分。輸入創建部分在哪裏？ – 2012-02-18 15:04:54

假設你有一些contanier列字段（如「列」格）和領域有field類，而最後一個字段last類，那麼這可能幫助：

$('.last').live('focusout', function() { 
    var $this = $(this); 
    $this.removeClass('last'); 
    $this.parent().append('<input class="field last" type="text"></input>'); 
});

當然，你可以添加的東西比這更漂亮很多;）

來源

2012-02-18 15:00:33 sje397

謝謝！我稍微修改了這個（有點）讓它工作。但是，由於某種原因，它不使用作爲新的'last'元素創建的新輸入，而是使用原來的最後一個元素。有任何想法嗎？乾杯! – chintanparikh 2012-02-18 16:03:18

@ user1045696 - 我認爲這是由於'最後'類操作。你能否看到它從最初的輸入中刪除，並通過檢查瀏覽器中的輸入添加到新的輸入中？ – sje397 2012-02-20 01:14:21

另外，這裏使用'live'很重要。它讓jquery處理新元素的focusout事件，而不必顯式創建新的事件處理程序。 – sje397 2012-02-20 01:16:40

$('input[type="text"]:last').live('keyup', 
    function(e) { 
     if (e.which == 9) { 
      $(this).parent().append($('<input/>', { 
       value: '', 
       type: 'text', 
          name: 'YOUR_CHOICE', 
          class: 'YOUR_CHOICE' 
      })); 
     } 
    });

來源

2012-02-18 15:09:56 thecodeparadox

謝謝！我使用了選擇器，但由於某種原因，它在創建新輸入時未檢測到新的最後一個元素。我編輯了我的原始文章，有什麼想法？ – chintanparikh 2012-02-18 16:04:28

如何創建與jQuery（或香草JS）

回答

相關問題