活動不被事件處理程序

捕獲我有一個<div>與id="modal"與jQuery的load()方法動態生成：活動不被事件處理程序

$('#modal').load('handlers/word.edit.php');

word.edit.php包含幾個輸入元件，其被加載到一個模態<div> 。

使用jQuery的keyup方法我可以在事件觸發後捕獲輸入值，但當元素動態添加到模態div時，該事件不會在用戶輸入文本時觸發。

哪個jQuery方法支持由動態創建的元素觸發的處理事件？

創建新的輸入元素的代碼是：

$('#add').click(function() { 
    $('<input id="'+i+'" type="text" name="translations' + i + '" />') 
     .appendTo('#modal');

拍攝用戶的價值的代碼是：

$('input').keyup(function() { 
    handler = $(this).val(); 
    name = $(this).attr('name');

這第二個代碼塊似乎是原始的元素工作，但它不會被新的動態生成的元素觸發。

來源

2012-10-10 redbull330

我還在我的** index.php上加載了兩個版本的jQuery ** ' 但是工作不是**功能**只工作** **生活** **編輯：#modal輸入** （）;}（）;（）;}}（$）（$）（）。 \t \t \t name = $（this）.attr（'name'）; \t \t \t alert（handler +「」+ name）; \t \t}）;' 當我使用代碼，所以它工作正常，再次感謝您的幫助:) – redbull330

只是一個說明。你不加載兩個版本的JQuery。加載JQuery的1.6.2版本和JQuery UI的1.8.18。 JQuery UI用於用戶界面組件，與JQuery不同。爲了獲得最佳實踐，請嘗試從谷歌等在線資源中使用JQuery而不是本地文件。 –

@Carlos愛德華多布魯諾佩雷拉感謝您的良好清除，我一直認爲，兩者都有相同的包已存在只有-ui添加了額外的功能，但它不是這樣:) – redbull330

您需要delegate the event頁面內最近靜態祖先元素（見"Understanding Event Delegation"）。這就是說，綁定事件處理函數的元素必須在處理程序綁定時存在，因此對於動態生成的元素，您必須允許事件冒泡並進一步處理。

jQuery .on方法就是這樣做的（或者老版本的jQuery的.delegate。）

// If version 1.7 or above 

$('#modal').on('keyup', 'input', function() { 
    handler = $(this).val(); 
    name = $(this).attr('name'); 
});

或者在舊版本

// If version 1.6 or below 

// note the selector and event are in a different order than above 
$('#modal').delegate('input', 'keyup', function() 
{ 
    handler = $(this).val(); 
    name = $(this).attr('name'); 
});

來源

2012-10-10 23:31:20

您的回答，您鏈接到的文章以及提及'的@ernie都真正幫助我理解'.on（）'是如何工作的。謝謝！ –

真的很有幫助的答案，非常感謝您的信息 – alxrb

發生這種情況的原因是，您在之後添加了輸入元素，以此方式連接了事件。嘗試.on：

$('body').on('keyup', 'input', function() { handler = $(this).val(); name = $(this).attr('name'); });

使用.on將確保keyup事件連線到那個在頁面上輸入原，以及那些後來動態添加任何。

來源

2012-10-10 23:26:48 Gromer

對不起，之前工作的輸入，其中之前加載**的appendTo（）模式** div ，但現在都沒有工作，我不明白什麼是不同的是**在** 使用和我認爲輸入元素在**模式** div不在**身體*** ** 但每個div必須在** body **中創建我不知道但它不起作用 – redbull330

您可以將c將''body''掛到任何你喜歡的選擇器上。但是，該選擇器應該可以工作。你的模態HTML仍然在體內，因爲它不能在它之外。 – Gromer

當您動態更改DOM時，jQuery不會將事件處理程序附加到它們。您需要使用on() and delegated events

您的輸入項，你需要這樣的：

$("<parentSelector>").on("keyup", "input", function() { 
    handler = $(this).val(); 
    name = $(this).attr('name'); 
})

凡parentSelector是在DOM比輸入元素的東西更高，並且位於頁面加載元素，也許是表單ID或其他東西。

來源

2012-10-10 23:29:01 ernie

你的最後一句話確實幫助我理解了這個概念。謝謝！ –

函數綁定是在頁面加載中進行的。處理使用函數live（）動態創建的元素。例如：

$ ("p"). live ("click", function() { 
    // Your function 
});

來源

2012-10-10 23:30:08

就像一個註釋，[.live（）]（http://api.jquery.com/live/）在jQuery 1.7中已被棄用，因此切換到[.on（）]（http： //api.jquery.com/on/） – ernie

哎呀，感謝您的信息，我真的過時了！抱歉。 –

如果您需要捕獲的改變對於所有的表單元素，特別是選擇框的，我知道他們在這裏沒有提到，但它有助於瞭解，使用下面的代碼：

$(document).on('change', ':input', function() { 
    alert('value of ' + $(this).attr('name') + ' changed') 
});

這應涵蓋所有input，textarea，select，checkbox，radio等

來源

2015-06-08 21:39:05

活動不被事件處理程序

回答

相關問題