2

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

});
4

5 回答 5

4

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

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

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

于 2013-06-11T14:06:25.713 回答
3

由于类是动态添加的，所以需要使用事件委托来注册事件处理程序

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

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

于 2013-06-11T14:07:42.537 回答
2

做事件委托。

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

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

于 2013-06-11T14:06:37.840 回答
2

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

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

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

于 2013-06-11T14:08:25.410 回答
1

您需要在附加创建的 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'); 
       });

    });
});
于 2013-06-11T14:08:48.377 回答