How to add JQuery to html loaded from ajax call?

Question

I have a div in a jsp like this :

<div id="response" class="response"></div>

This div, after making an ajax call to a servlet, is appended as :

<div id="response" class="response">
<h3>Connected as user : Tony</h3>
<p>You selected the procedure : <B>lg_resultsretrieval</B></p>
<div class="showbiz">
<label>Enter procedure input variables : </label></div> 
<div class="actual-input">
<label>Parameter1: </label><textarea name='text1' id='text1' class='txtarea' rows='1' cols='50'>starttime - timestamp without time zone</textarea><br> 
<label>Parameter2: </label><textarea name='text2' id='text2' class='txtarea' rows='1' cols='50'>endtime - timestamp without time zone</textarea><br> 
<label>Parameter3: </label><textarea name='text3' id='text3' class='txtarea' rows='1' cols='50'>in_sourceindicator - integer</textarea><br> 
<label>Parameter4: </label><textarea name='text4' id='text4' class='txtarea' rows='1' cols='50'>keyword - character varying</textarea><br> 
</div>
</div>

I wrote a jquery function for the textarea's as follows :

//submits only when the textbox value is valid
    $("#response").on("change", function() { 
              $("#Execute").click(function () {
                    if ($(".txtarea").val() == this.defaultValue)
                    {
                        alert("Please insert a valid value");
                        return false;
                    }
                });

              $("txtarea")
              .focus(function() {
                    if (this.value === this.defaultValue) {
                        console.log('inside focus function');
                        this.value = '';
                    }
              })
              .blur(function() {
                    if (this.value === '') {
                        this.value = this.defaultValue;
                    }
            });       
            });

Problem is, the above code doesn't work although in the jquery documentation it says to use on function for dynamically loaded elements. How do I make it work ? Please suggest

Answer 1

If the div itself is being replaced in the DOM, then indeed any handler attached to that div will be lost. Note how you attach the handler here:

$("#response").on("change", function() {
  // code
});

This attaches the handler directly to the div as it exists when the $("#response") selector is evaluated. Handlers are attached to elements , not to dynamic selectors. In order to retain the handler for elements which are added/replaced, you need to bind to a parent element and filter for the target element. Something like this:

$(document).on("change", "#response", function() {
  // code
});

This would bind the handler to the document object, which doesn't change so the handler won't be lost as child elements change. (For reference, I actually just blogged about this yesterday.)

Answer 2

That will not work for dynamically added element.use:

$(document).on("change",'"#response"', function() { 
     //code here
 });

Answer 3

First you have div with id response. then after appending html in this div you can bind all jquery event of added html like this:

 $("#response").on(EventName,htmlDom, function() { 
                 //to do your code
      });

eg for textArea Try like this:

$("#response").on("focus","textarea", function() { 
         //to do your code
 });