Getting value from a TextBox after paste

Question

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 coming.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.net/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.

Answer 1

Try event delegation for dynamically generated elements -

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

Answer 2

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

Try this:

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