由 Javascript 生成的 HTML 元素 - 现在不起作用 [重复]答案

【问题标题】：HTML elements generated by Javascript - now not functional [duplicate]由 Javascript 生成的 HTML 元素 - 现在不起作用 [重复]
【发布时间】：2013-06-11 14:04:58
【问题描述】：

我正在使用 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'); 
    });

});

【问题讨论】：

标签： jquery html class

【解决方案1】：

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

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

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

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

【讨论】：

谢谢。这很好用
@三亚不客气！
@Sanya 如果您发现有帮助，请标记为答案。在投票箭头下方打勾。 :)

【解决方案2】：

由于类是动态添加的，所以需要使用event delegation注册事件处理函数

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

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

【讨论】：

【解决方案3】：

进行事件委托。

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

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

【讨论】：

【解决方案4】：

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

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

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

【讨论】：

【解决方案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'); 
       });

    });
});

【讨论】：