活动不被事件处理程序

捕获我有一个<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

活动不被事件处理程序

回答

相关问题