动态创建的文本框上的 jQuery 按键事件答案

【问题标题】：jQuery keypress event on dynamically created textboxes动态创建的文本框上的 jQuery 按键事件
【发布时间】：2011-11-14 19:31:33
【问题描述】：

我正在动态创建一个表格，并希望在动态创建的日期文本框中捕获按键事件。如果我只有一个 payment_date 文本框，那就太好了，但我有很多。我看过 .live 但我对此太陌生，无法弄清楚。请问有人可以具体给我吗？这是带有相关文本框的 HTML：

        <?php 
        foreach($student_classes as $class):
            if( $student['student_id'] == $class['student_id'] ) {                
                $i = $class['registration_id'];
                $deleted = FALSE;
        ?>
             <td>
                <input type="text" 
                name="students[<?php echo $i ?>][registration_payment_date]"
                id="payment_date[<?php echo $i ?>]" 
                value="<?= html($class['registration_payment_date']) ?>"
                size='10' maxlength="10" 
                > 
            </td>
       <?php endforeach; ?>

jQuery:

jQuery(document).ready(function ()
{
       var $payment_date = jQuery('#payment_date');    
       // Format the date as it is entered
          $payment_date.keypress(function(event) {
          DateFormat(this, this.value, event, false, '1');
      });

     // Check to make sure the date is valid
        $payment_date.change(function ()
    {
        if( dateValid(this.value) == false );   
        alert('The date is not valid'); 
    });
});

谢谢！

【问题讨论】：

标签： jquery events dynamic bind keypress

【解决方案1】：

虽然jQuery.live() 可以工作，但最好不要以这种方式进行 JavaScript 开发。

发出<input> 元素时，将“payment_date”添加为一个类。现在说

$(".payment_date").bind("keypress", function(event){
    DateFormat(this, this.value, event, false, '1');
}

这样做的好处是它适用于任意数量的具有 payment_date 类的 div。

【讨论】：

您的解决方案效果很好，我应该考虑使用一个类。我很好奇你为什么建议不要使用 jQuery.live()？
如果您使用实时，匹配该查询的任何元素，即使是在未来创建的，也会处理该回调。说有很大的代码库，有人做jQuery.live('.foo')，你不知道这个，动态创建一个class="foo"的元素。现在，如果您使用 jQuery.bind，它可以正常工作。如果你不这样做，它也会执行前面的回调。这就是我的原因，还有其他原因——stackoverflow.com/questions/1368223/…

【解决方案2】：

使用jQuery.live() 它将函数添加到DOM 结构中were、are 和will be 的元素选择器

http://api.jquery.com/live/

var $payment_date = jQuery('#payment_date');    
   // Format the date as it is entered
  $payment_date.live("keypress",function(event) {
      DateFormat(this, this.value, event, false, '1');
  });

 // Check to make sure the date is valid
    $payment_date.live("change",function ()
{
    if( dateValid(this.value) == false );   
    alert('The date is not valid'); 
});

【讨论】：

谢谢。我把它复杂化了——它真的很容易使用。我会再读一遍，这样我就可以理解了。

【解决方案3】：

JQuery live() 方法现已弃用，并从 1.9 中删除。

您应该使用on() 方法将事件绑定到动态创建的元素。

【讨论】：