Question

我在这样的jsp中有一个div：

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

这个div在对servlet进行ajax调用之后附加为：

<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>

我为textarea写了一个jquery函数，如下所示：

//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;
                    }
            });       
            });

问题是，上面的代码不起作用，尽管在jquery文档中它表示要在动态加载元素的函数上使用。我如何使其工作？请建议

Answer 1

如果在DOM中替换了div本身，那么附加到div的任何处理程序都将丢失。请注意如何在此处附加处理程序：

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

这会将处理程序直接附加到div，因为它在评估$("#response")选择器时存在。处理程序附加到元素，而不是动态选择器。为了保留添加/替换的元素的处理程序，您需要绑定到父元素并过滤目标元素。像这样：

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

这会将处理程序绑定到document对象，该对象不会发生变化，因此当子元素发生变化时，处理程序不会丢失。（作为参考，我昨天实际上是just blogged about this。）

Answer 2

这不适用于动态添加的element.use：

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

Answer 3

首先你有div响应的div。然后在这个div中附加html后，你可以绑定所有添加html的jquery事件：

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

例如textArea尝试这样：

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

如何将JQuery添加到从ajax调用加载的html中？

3 个答案: