CODEWITHSUNDEEP
javascripthtmljquery
subjectivist
subjectivist

Reputation: 245

How do I connect a textbox to jquery events dynamically?

I have an application that uses jquery when editing date fields. It works on all fields that have the css class "date". I am reading some HTML code from the server into a DIV that functions as a pop up window. The HTML code includes several date fields and I want to have jquery manage those fields, too. The page has code pasted below in the head element and jquery automatically attaches to the appropriate fields. I need to add fields to jquery when the pop up appears and remove them when the pop up closes. When searching for an answer I could only find where jquery creates a textbox, but not attach to an existent textbox.

  <script src="Include/jquery-latest.js" type="text/javascript"></script>
  <script src="Include/jquery.maskedinput.js" type="text/javascript"></script>
  <script type='text/javascript'>
    $(function () {
      // Define your mask (using 9 to denote any digit)
      $('.phone').mask('(999)999-9999');
    });
    $(document).ready(function () {
      $('.phone').change(function () {
        var validnum = $(this).val().match(/^([01]?[0-9]|[0-9]|[0-9])[0-9]|[0-9]|[0-9]-[0-9]|[0-9]|[0-9]|[0-9]$/);
        if (!validnum) {
          $(this).val('').focus().css('background', '#fdd');
          alert('Please enter a valid Phone Number (999)999-9999.');
        } else {
          $(this).css('background', 'transparent');
        }
      });
    });
    $(function () {
      // Define your mask (using 9 to denote any digit)
      $('.date').mask('99/99/9999');
    });
    $(document).ready(function () {
      $('.date').change(function () {
        var validnum = $(this).val().match(/^(0?[1-9]|1[012])[\/\-](0?[1-9]|[12][0-9]|3[01])[\/\-]\d{4}$/);
        if (!validnum) {
          $(this).val('').focus().css('background', '#fdd');
          alert('Please enter a valid Date mm/dd/yyyy.');
        } else {
          $(this).css('background', 'transparent');
        }
      });
    });
  </script>

Upvotes: 0

Views: 48

Answers (2)

subjectivist
subjectivist

Reputation: 245

Since the mask and event functions are enclosed, I moved them to the routine that creates the pop up and that resolves the issue, causing them to be called again each time. I placed a date test textbox on the form and displayed properties. Each time there was only one jquery property present, so it appears everything was removed and rewritten each time.

Upvotes: 0

Alex
Alex

Reputation: 829

Why doesn't your solution work?

By using $('.date').change(... jQuery attaches event listeners to all elements present in the DOM the moment you execute this function. As your modal gets added in later, it won't have received a listener.

Solution: $(document).on('change', '.date', function () { ...

By using this, you attach the event listener to the document root, so every time anything in the document changes, jQuery checks, if the changed element matches the selector you've provided as the second param (in this case .date). So all elements, even those added later to the page will react to changes.
BUT: As I said, you attach a listener to the document. As jQuery uses a shadow-DOM in the background it won't cost you much performance, but if you build a big application with many of these listeners, you might run into performance issues at some point. In this case you'd better add the listeners specifically to the element you just added.

Upvotes: 1

Related Questions