由Javascript生成的HTML元素 – 现在不起作用

我正在使用javascript生成HTML元素。 我将同一个类应用于所有元素。 我有一个函数将在该类遇到keyup事件时执行。

问题是我的函数没有识别javascript创建的元素。

请参阅此处的示例 – > jsFiddle

HTML

Type in the box below, an alert will appear
  

 Now Click Me

 
 

jQuery的

 $(document).ready(function() { $('button').click(function() { var a = "
The boxes below have the same class, thus they should show the alert when you type

"; var b = "
"; $('#mainform').append(a + b); }); $('.conv').keyup(function() { alert('it works'); }); }); 

Answer 1

使用事件委托（ 动态添加.conv ）

 $('#mainform').on('keyup','.conv',function() { alert('it works'); }); 

演示---> http://jsfiddle.net/VxTh5/7/

• http://learn.jquery.com/events/event-delegation/

Answer 2

由于该类是动态添加的，因此您需要使用事件委派来注册事件处理程序

 // New way (jQuery 1.7+) - .on(events, selector, handler) $('#mainform').on('keyup', '.conv', function(event) { event.preventDefault(); alert('it works'); }); 

这会将您的事件附加到#mainform元素中的任何输入，从而减少必须检查整个document元素树并提高效率的范围。

Answer 3

做事件代表团 。

 $(document).on('keyup' ,'.conv',function() { alert('it works'); }); 

http://api.jquery.com/on/

Answer 4

它不起作用的原因是因为你的元素在DOM就绪时不存在，因此当你的处理程序被调用时，它找不到这些元素。 事件委托将click事件绑定到存在的元素：

 $("#mainform").on('keyup', '.conv', (function() { alert('it works'); }); 

我们使用#mainform因为它存在于DOM就绪。 您也可以使用document ，但它是一个非常广泛的点击处理程序。

Answer 5

你需要在追加创建的div之后绑定事件，因此将你的绑定代码移动到按钮点击事件中

 $(document).ready(function() { $('button').click(function() { var a = "
The boxes below have the same class, thus they should show the alert when you type

"; var b = "
"; $('#mainform').append(a + b); $('.conv').keyup(function() { alert('it works'); }); }); });