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

Question

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

问题是我的函数无法识别 javascript 创建的元素。

请参阅此处的示例-> jsFiddle

HTML

<p>Type in the box below, an alert will appear</p>
   <input type='text' id='x' size='30' class='conv'/>
   <br/><br/>

   <button id='btn'>Now Click Me</button><br/><br/>

   <div id='mainform'></div>

jQuery

$(document).ready(function() {
    $('button').click(function() {
      var a =  "<p>The boxes below have the same class, thus they should show the alert when you type</p><input type='text' size='30' class='conv' id='a0'/><br/>";
      var b = "<input type='text' size='30' class='conv' id='a1'/><br/>";
      $('#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 =  "<p>The boxes below have the same class, thus they should show the alert when you type</p><input type='text' size='30' class='conv' id='a0'/><br/>";
      var b = "<input type='text' size='30' class='conv' id='a1'/><br/>";
      $('#mainform').append(a + b);
       $('.conv').keyup(function() {
          alert('it works'); 
       });

    });
});