CODEWITHSUNDEEP
jquery
Damon
Damon

Reputation: 4484

Listen for keypress events on dynamically created elements?

I am dynamically creating text inputs on my page via a button click. Everything is working great.

For all existing elements (elements that are rendered when the page loads) I am listening to the keypress event to add/remove a class like this:

$("input[type='text'], input[type='email'], input[type='number'], input[type='search'], input[type='password'], input[type='tel'], textarea").keyup(function (event) {
    if (event.which != 13) {
        if ($(this).val().length >= 1) {
            $(this).parent().addClass('active');
        } else {
            if ($(this).val().length == 0) {
                $(this).parent().removeClass('active');
            }
        }
    }
});

Again, all is well - when I type in an input - the class is added/removed accordingly.

When I click a button to add more fields (for example, "add another name") I would also like to listen to the keypress event. I have tried this but no luck.

$('body').on('click', $("input[type='text'], input[type='email'], input[type='number'], input[type='search'], input[type='password'], input[type='tel'], textarea"), function (event) {
    if (event.which != 13) {
        if ($(this).val().length >= 1) {
            $(this).parent().addClass('active');
        } else {
            if ($(this).val().length == 0) {
                $(this).parent().removeClass('active');
            }
        }
    }
});

Is there a way to make dynamically created elements listen to keypress events? Thank you for any suggestion!

EDIT

For anyone else who finds this thread, here is what the final method looks like.

$('body').on('keypress', "input[type='text'], input[type='email'], input[type='number'], input[type='search'], input[type='password'], input[type='tel'], textarea", function (event) {
    if (event.which != 13) {
        if ($(this).val().length >= 1) {
            $(this).parent().addClass('active');
        } else {
            if ($(this).val().length == 0) {
                $(this).parent().removeClass('active');
            }
        }
    }
});

Upvotes: 0

Views: 96

Answers (2)

Yaser
Yaser

Reputation: 5719

This is what you want:

$(document).on('keypress', function(e) {
  console.log(e.target);
    var tag = e.target.tagName.toLowerCase();
    if (tag == 'input' || tag == 'textarea') 
    {
      if (event.keyCode != 13) {
        if ($(this).val().length >= 1) {
            $(this).parent().addClass('active');
        } else {
            if ($(this).val().length == 0) {
                $(this).parent().removeClass('active');
            }
        }
      }
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" />

Alternetively you can give them all a class and use this:

$('.commonclass').keypress(function(event){       
   if (event.keyCode != 13) {
        if ($(this).val().length >= 1) {
            $(this).parent().addClass('active');
        } else {
            if ($(this).val().length == 0) {
                $(this).parent().removeClass('active');
            }
        }
    }
});​

Upvotes: 1

Calvin
Calvin

Reputation: 53

https://api.jquery.com/on/

At the 1st argument, add keypress next to click for keypress event. Also you don't need to wrap the selectors around $(...).

Hope this helps.

Upvotes: 2

Related Questions