我的選擇是不更新：jQuery選擇後動態添加新元素

$('section#attendance input:last')

不過，我附上另一個輸入部分＃出席。我想選擇現在選擇該元素（因爲它應該的，因爲:last。然而，由於某些原因，它沒有，我也不太清楚爲什麼

這裏是我的全碼：？

$('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" />'); 
     } 
    });

新代碼：

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

編輯：這個問題似乎是在「輸入：去年」，因爲它的工作原理，如果我只用輸入另外，如果我添加類「最後」的。最後一個元素，它在我使用'input.last'作爲選擇器時起作用

來源

2012-02-19 chintanparikh

取決於你所使用的jQuery的版本，您應該使用.delegate()或.on()（jQuery的（jQuery的1.7之前）1.7+ ）具有委託事件處理，該處理將處理動態添加的元素的事件。注意.live()已從所有版本的jQuery中棄用，因此不應再使用它。

使用.on()，您可以使用此：

$("#attendance").on("keydown", "input:last", 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" />'); 
    } 
});

使用.delegate()有異曲同工之處（除了參數是按不同的順序）。你可以在jQuery doc .delegate()和.on()中看到他們兩個。

委託事件處理使用某些javascript事件的「冒泡」功能。這允許你將一個事件處理程序附加到一個父對象（它不會來來去去），並讓它查看每個從孩子「冒泡」到它的事件，檢查事件是否來自具有適當的選擇器，如果是的話，執行你的事件處理代碼。這樣，當物體來來去去時，他們的事件仍然得到適當的處理。

正如您最初做的事情那樣，您將事件處理程序直接綁定到在事件綁定代碼運行時與選擇器'section#attendance input:last'匹配的對象。從此，它直接綁定到該特定對象，而不管該對象是否仍與選擇器匹配，或者是否將新對象添加到與選擇器匹配的DOM。使用.delegate()或.on()的委託事件處理允許事件處理行爲更具動態性 - 自動適應DOM中的更改。您只需將事件綁定到不會更改的公共父對象，並且它可以自動監視它的所有子對象。

來源

2012-02-19 03:15:08 jfriend00

嘿，我試了一下，但由於某種原因，它似乎沒有工作。我已經用新代碼更新了我的帖子，並且已經查看了.on（）的文檔，但是我無法弄清楚什麼是錯誤的。歡呼的幫助！ – chintanparikh 2012-02-19 04:35:32

問題是您添加的輸入標記沒有您的代碼所期望的正確類型的名稱屬性。您沒有透露您的HTML，但是由於它從名稱屬性中解析出數字的方式，因此您的代碼無法工作。你的正則表達式匹配兩個數字之間的逗號，但你添加的新輸入標籤沒有這種格式。你可以在這裏看到一個更簡單的版本：http://jsfiddle.net/jfriend00/uVHwK/。我們不得不看到你的HTML更具體的建議。 – jfriend00 2012-02-19 04:54:33

要對動態插入的內容做出反應，您將不得不使用委託事件。目前推薦的功能是.on()（live已棄用，bind和delegate被取代）。

來源

2012-02-19 03:14:28 nijansen

'bind'和'delegate'不被棄用。 – 2012-02-19 03:17:20

你說得對。 'live'被棄用，'bind'和'delegate'被取代。 – nijansen 2012-02-19 03:19:42

問題最有可能是因爲您正在使用keydown事件。這實際上使用選擇器的綁定。僅綁定第一次附加時存在的效果項目。 JQuery文檔說：

bind（）將事件附加到存在的元素或與調用時匹配選擇器。之後創建的任何元素或者因類更改而前進的元素都不會觸發綁定事件。

你應該看的東西，如以下取代的keydown：

$('section#attendance).on("keydown", "input:last", function(e) {...});

來源

2012-02-19 03:15:00 AlexGad

請勿使用！使用on

實時方法由於性能不佳而不推薦使用，而是現在使用on方法。

$('section#attendance').on('keydown', 'input:last', function(e) { 
    /* ... code ... */ 
});

也沒有理由讓您的帳號選擇面前section標籤。

來源

2012-02-19 03:18:40

jQuery選擇後動態添加新元素

回答

請勿使用！使用on

相關問題