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

我有这样的一个jsp一个div：如何将jQuery添加到从ajax调用加载的html中？

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

我写了一个jQuery函数的文字区域的：

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

这个div，使一个AJAX调用一个servlet后，作为附加如下：

//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的文档中工作，它表示对函数用于动态加载的Elemen TS。我如何使它工作？请建议

来源

2014-03-12 Karthik

1）不存在与元素的id'Execute' 2）没有标签'txtarea'的元素 – Justinas

DIVS没有变化事件。 – epascarello

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

首先你有div与id响应。然后在附加HTML后这个div可以绑定添加HTML的所有类似的jQuery的事件：

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

例如，对于textarea的尝试是这样的：

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

来源

2014-03-12 12:18:55

最快的回答..谢谢 – Karthik

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

这不会对动态添加element.use工作：

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

来源

2014-03-12 12:16:37

如果div本身是在DOM被替换，那么确实连接到该div任何处理器都将丢失。注意：您怎么会在这里的附加处理程序：

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

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

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

这将处理程序绑定到document对象，不改变这样的处理程序也不会丢失作为子元素而改变。（仅供参考，实际上我昨天是just blogged about this。）

来源

2014-03-12 12:18:43 David

很好的解释兄弟！ Thanx – Karthik

很好的解释和不错的发贴人..... 1 :) –

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

回答

相关问题