什麼是動態添加事件的正確方式？

我的目標是，當我專注於最後一行文本時，另一行出現在它的下面。然後在一定數量的線路上禁用此功能。我似乎無法弄清楚什麼是錯在這裏：什麼是動態添加事件的正確方式？

$(document).ready(function() { 
    lineCount = 0; 
    $("form#qc").delegate("input:text:last-child", "focus", newTextLine); 
}); 

function newTextLine() { 
    newLine = ("<div id='ansInput{0}'>Answer {0}: <input type='text' name='ans1' /></div><!--ans1-->").format(lineCount); 
    currentDiv = ("#ansInput{0}").format(lineCount); 
    $(currentDiv).after(newLine); 
    lineCount = lineCount++; 
}

這是HTML頁面：

<form id="qc" name="qc"> 
<h2>Create New Question!</h2> 
<div id="ansInput0">Question: <input type="text" name="Question" /></div><!--question--> 
<input type="submit" value="Submit" /> 
</form>

我得到一個非常非常weired結果：每次兩行顯示，所有的有索引0和所有響應的事件處理程序，假設只爲最後一個工作... 任何想法有什麼問題的代碼？

JSfiddle

還就如何使代碼更聰明任何意見，歡迎！

來源

2011-05-27 ilyo

如上所述，代碼中存在一些問題。我想嘗試這樣的：克隆的最後一個div，更改ID和清除輸入的值：

$(function() { 
    $("#qc>div:last-of-type>input").live('focus', function() { 
     $(this).parent().after($(this).parent().clone().attr('id', 'ansInput' + $('#qc>div').length).find('input').val('').end()); 
    }); 
});

http://jsfiddle.net/7enNF/1/

輸入文字：最後一個孩子選擇父代中最後一個子元素的輸入。所以它會選擇所有輸入，因爲它們中的每一個都是ansInput div中唯一的（因此是最後一個）子元素。#qc> div：last-of-type>輸入選擇最後一個div中的輸入。我使用最後一種類型，因爲最後一個孩子不會匹配div，因爲提交按鈕是表格的最後一個孩子
結束是必要的，因爲我選擇了div，然後我選擇了「find （'input'）「來清除該值。如果我離開它，它只會插入輸入（不是div）。所以end（）從輸入回到div再次，以便插入div。

我希望這不是太混亂！ :)

來源

2011-05-27 16:45:00 Andy

@Andy，thanx的解決方案，但你能說出我的代碼中的問題嗎？ – ilyo 2011-05-27 17:16:36

@Andy也是'$（「＃qc> div：last-of-type> input」）'在div的最後一個div或最後一個輸入中選擇輸入？ – ilyo 2011-05-27 17:21:01

哦，最後一個:)爲什麼你使用'.end（）'？ – ilyo 2011-05-27 17:23:04

我在這裏看到一些問題。首先，根據您提供的代碼，我沒有看到您的lineCount變量的範圍。其次，僅僅因爲你要爲你創建的新元素添加一個事件處理程序，並不意味着你要從舊元素中刪除它。

來源

2011-05-27 16:39:56 JSager

請問你第一個更具體嗎？如果最後一個孩子發生了變化，現場活動不會迴應，我檢查了它 – ilyo 2011-05-27 17:14:40

什麼是動態添加事件的正確方式？

回答

相關問題