Jquery的事件冒泡時。對事件是一個嵌套函數內

我有這樣的代碼在主體onload事件：Jquery的事件冒泡時。對事件是一個嵌套函數內

$.each(["#tbl_p2", "#tbl_p5", "#tbl_ukalk"], function(index,value){ 
    $("tbody tr:not(:last)", value).find("input[type='text']:visible:last").on("blur", this, function(){ 
     $("tbody tr:last input[type='text']:first", value).focus() 
    }) 
})

所提到的表（tbl_p2，tbl_p5和tbl_ukalk）都在某一時刻動態地添加和它們由幾行在每行上有幾個文本輸入組成。代碼的目的是在最後一行的最後一個輸入被模糊時聚焦（）最後一行的第一個輸入。

它通過控制檯應用，但不通過onload，因此我知道它與冒泡有關。我試着添加「文件」像這樣...

$.each(["#tbl_p2", "#tbl_p5", "#tbl_ukalk"], function(index,value){ 
    $("document tbody tr:not(:last)", value).find("input[type='text']:visible:last").on("blur", this, function(){ 
     $("tbody tr:last input[type='text']:first", value).focus() 
    }) 
})

...泡夠遠，但不會工作無論是在控制檯或onload事件 - 我假設怎麼一回事，因爲「文件」不是$ .each（）中給定上下文的一部分。

我也試過做$.each(["document #tbl_p2", ...])，但那也行不通。

修改：添加了jsfiddle的工作代碼。如果表格是動態添加的，則不起作用。

編輯II：更新jsfiddle動態添加的表，用於表明事件偵聽器不更新到新的表元素。

編輯III：100％的工作jsfiddle，非常感謝@Rob Schmuecker（見接受的答案）

來源

2013-10-28 aanders77

看起來像喲你的代碼在添加表之前運行。 –

@AnkitJaiswal，我知道。這就是事件冒泡或事件代表團進來的地方，無論如何它都應該起作用。看看[本頁]的最後一部分（http://jqfundamentals.com/chapter/events）。 – aanders77

我認爲這是與事件委託做的，因爲表不是由您調用的時候加載onload？

看看這裏http://api.jquery.com/on/關於委託你的活動。您可能需要重新格式化您的代碼以使其正常工作。

或者，也可以在表格實際上已加載到DOM中的情況下調用您的代碼，例如在調用ajax請求或類似的success回調中。

編輯：這是一個正確的工作小提琴http://jsfiddle.net/7UTBQ/3/ ，這裏是正確的工作的JavaScript

JS：

$(document).on("blur", "table tr:not(tr:last-child) td:last-child input[type='text']:visible", function (event) { 
    console.log('blur'); 
    $("tr:last input[type='text']:first", $(event.target).parents('table').get(0)).focus(); 
});

來源

2013-10-28 08:20:39

好吧，重新格式化我的代碼是我需要幫助的。我意識到事件委託，這就是爲什麼我試圖添加「文檔」作爲第一個選擇器，以確保事件委託給從一開始就存在的元素。 – aanders77

@ aanders77我會盡力幫助你，如果你可以提供一個jsfiddle.net與一些虛擬表與輸入等等。你可以在HTML部分模擬它們（具有相同的類名稱，ID等），我會確保它們被動態地添加，以便我們可以重現您的流程並讓您排序。問題在於你的選擇器的順序，但沒有測試的東西，我沒有足夠的信心在評論中一次嘗試就可以得到正確的結果！ –

這是[小提琴]（http://jsfiddle.net/9u7EZ/）。我期待着你的回答，並看看你如何得到在小提琴中動態添加的表格:) – aanders77

試試這個

$.each(["#tbl_p2", "#tbl_p5", "#tbl_ukalk"], function(index,value){ 
    $("document tbody tr:not(:last) "+value).find("input[type='text']:visible:last").on("blur", this, function(){ 
     $("tbody tr:last input[type='text']:first "+value).focus() 
    }) 
})

在我身邊沒有測試你可以試試..

來源

2013-10-28 08:20:44 Manwal

不......沒有工作。看不出爲什麼它，要麼...;） – aanders77

需要看到你的小提琴你應該爲你裝箱。 – Manwal

補充，在這裏：http://jsfiddle.net/9u7EZ/ – aanders77

Jquery的事件冒泡時。對事件是一個嵌套函數內

回答

相關問題