jQuery keypress event on dynamically created textboxes

Question

I am dynamically creating a table and want to capture the keypress event on the dynamically created date textboxes. If I have only one payment_date textkbox it's great, but I have many. I've looked at .live but I'm too new at this to figure it out. Can someone be specific for me please? Here is the HTML with the textbox in question:

        <?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'); 
    });
});

Thank you!

score 4 · Answer 1 · answered Sep 11 '11 at 16:17

4

While jQuery.live() will work, it's best not to approach JavaScript development this way.

While emitting the <input> element, add "payment_date" as a class. Now, say

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

The advantage of this is that it'll work fine for any number of divs that have the payment_date class.

answered Sep 11 '11 at 16:17

antileet2

323
1
2
7

Your solution works great,I should have thought of using a class. I'm curious why you advise to not use jQuery.live()? – Sara Sep 11 '11 at 16:41
If you use live, _any_ elements that match that query, even created in the future handle that callback. Say that there's a large codebase, and someone does jQuery.live('.foo'), you don't know this, and dynamically create a element with class="foo". Now, if you use jQuery.bind, it works fine. If you don't, it will also execute the previous callback. That's my reason, there are also other reasons - http://stackoverflow.com/questions/1368223/performance-difference-between-jquerys-liveclick-fn-and-clickfn/1368310#1368310 – antileet2 Sep 12 '11 at 07:19

score 0 · Answer 2 · edited Aug 29 '13 at 07:44

0

JQuery live() method is deprecated now, and removed from 1.9.

You should use on() method to bind event to dynamically created elements.

edited Aug 29 '13 at 07:44

kleopatra

51,061
28
99
211

answered Aug 29 '13 at 07:39

Hemal

3,682
1
23
54

score 0 · Answer 3 · answered Sep 11 '11 at 15:48

use jQuery.live() it adds functions to element selectors which were,are and will be in DOM structure

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'); 
});

Thank you. I was over complicating it - it's really very simple to use. I'll read about it again so I can understand it. — Sara, Sep 11 '11 at 16:42

jQuery keypress event on dynamically created textboxes

3 Answers3