I have a scenario like this where i have dynamically generated textboxes. I have to validate the textbox for max 15 characters and restricting special characters.

Below is the code by which in document.ready() i am generating the textboxes and binding paste events to them.

$(document).ready(function(){

  //Generate textboxes..i have some logic by which i am generating
  //textboxes on the fly and giving textboxes a class flagText
  GenerateFlagBoxes();

  //i am binding the textboxes by class names
   var $flagArea = $('.flagText');
    $flagArea.bind('paste', function () {
        var element = this;
        setTimeout(function () {
            alert($(element).val());
        }, 100);
    });

});

But this is not working.The alert i provided is not ing.I think that the controls are created in the ready event can't be bound to listen events.Am i wrong.I don't know why it is happening. I want some suggestions.

Thanks in advance.

This fiddle is working.I am checking , i might be wrong some where.I will update where i am wrong;

/

Yes now working .In the document ready i am able to bind paste event.I was wrong some where in the code. :) Thanks for suggestions.

I have a scenario like this where i have dynamically generated textboxes. I have to validate the textbox for max 15 characters and restricting special characters.

Below is the code by which in document.ready() i am generating the textboxes and binding paste events to them.

$(document).ready(function(){

  //Generate textboxes..i have some logic by which i am generating
  //textboxes on the fly and giving textboxes a class flagText
  GenerateFlagBoxes();

  //i am binding the textboxes by class names
   var $flagArea = $('.flagText');
    $flagArea.bind('paste', function () {
        var element = this;
        setTimeout(function () {
            alert($(element).val());
        }, 100);
    });

});

But this is not working.The alert i provided is not ing.I think that the controls are created in the ready event can't be bound to listen events.Am i wrong.I don't know why it is happening. I want some suggestions.

Thanks in advance.

This fiddle is working.I am checking , i might be wrong some where.I will update where i am wrong;

http://jsfiddle/mnsscorp/8QFGE/1/

Yes now working .In the document ready i am able to bind paste event.I was wrong some where in the code. :) Thanks for suggestions.

• javascript
• jquery

• 2 $(document).ready(function () { ... }); – Terry Young Commented Apr 24, 2013 at 17:18
• see i have updated..thanks – mns Commented Apr 24, 2013 at 17:19
• Well, ignoring GenerateFlagBoxes();, the rest works fine. Any JavaScript errors? Is your '.flagText' selector actually correct? Or is GenerateFlagBoxes() generating boxes with incorrect class names? – Terry Young Commented Apr 24, 2013 at 17:20

3 Answers 3

Try event delegation for dynamically generated elements -

$(document).on('paste','.flagText',function(){
    var element = this;
    setTimeout(function () {
        alert($(element).val());
    }, 100);
});

For dynamic elements, you need an event delegate, such as on.

Try this:

$("body").on('paste', '.flagText', function () {
    setTimeout(function () {
        alert($(this).val());
    }, 100);
});

use target

var $flagArea = $('.flagText');
    $flagArea.bind('paste', function (e) {
        setTimeout(function () {
            alert(e.target.value);
        }, 100);
    });