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

Posted 2023-03-05

【中文标题】如何将 JQuery 添加到从 ajax 调用加载的 html 中？

【英文标题】：How to add JQuery to html loaded from ajax call?

【发布时间】：2014-04-16 13:40:35

【问题描述】：

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

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

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

<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 文档中它说要对动态加载的元素使用 on 函数。我如何使它工作？请推荐

【问题讨论】：

1) 没有id为Execute的元素 2) 没有标签为txtarea的元素

DIVS 没有更改事件。

@epascarello：change 事件似乎从子元素传播到 div 元素。在这种情况下，textarea 元素。也许这是特定于浏览器的行为？值得测试，我想。

@Justinas : txtarea 是文本区域的类名，Execute 是我写的jsp代码中按钮的id。

@Karthik 类选择器带有点 .txtarea，在您显示的代码中，根本没有按钮。

【参考方案1】：

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

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

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

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

这会将处理程序绑定到document 对象，该对象不会更改，因此处理程序不会随着子元素的更改而丢失。 （供参考，其实我昨天just blogged about this。）

【讨论】：

很好的解释兄弟！谢谢

【参考方案2】：

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

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

【参考方案3】：

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

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

例如对于 textArea 试试这样：

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

【讨论】：

最快的答案..谢谢

然而，占位符解决了这个问题。根本不需要所有这些代码。无论如何感谢您的帮助。