Question

我面临一个奇怪的问题。我的具体html如下所示：

<div class="pages">
  <div class="dynamicPages"></div>
  <div class="staticPages">
    <div class="span4">
      <ul class="nav nav-stacked">
        <li>
          <textarea class="newcomment field span12"
            style="width: 350px; height: 20px; resize:none;  font-size: 60%"
            id="newcomment${page.id}"
            name="newcomment${page.id}"
            placeholder="Enter comment here...">
          </textarea>
        </li>
      </ul>
    </div>
  </div>   
</div>

现在有时我会生成与div类span4内部相同的html，并将其添加到div类动态，如下所示：

  $(".dynamicPages").append(page_html);

这是我在对服务器进行ajax调用后生成的动态html。

当用户在文本区域中输入回车键时，我有以下jquery函数。

  $(".pages").on('keydown','.newcomment',function(event) {
    if(event.which == '13'){
      ... do some stuff
    }
  });

现在一切都很完美。

现在我想为我的文本区域添加以下插件：

https://github.com/jaz303/jquery-grab-bag/blob/master/javascripts/jquery.autogrow-textarea.js

所以我改变了上面的jquery，如下所示

 $('.pages .newcomment').autogrow().keypress(function(event){
   if(event.which == '13'){
     ...
   }
 });

在我之前提到的成功事件中的ajax调用中我再次做了一些事情，因此autogrow将自己附加到动态生成的元素，如How do I automatically run a method on a dynamically generated textarea with jquery?

中所述

$('.pages .newcomment').autogrow();

但是现在我看到，在我添加动态html的情况下，jquery函数根本没有被调用。当我重新加载页面时，即从服务器端属性填充html时，jquery函数被正确调用。

Answer 1

$('.pages .newcomment').autogrow().keypress(function(event){

这一行等同于：

$('.pages .newcomment').autogrow();
$('.pages .newcomment').keypress(function(event){

这不适用于动态添加的元素，因为它们在绑定时不存在。您可以在代码中使用on进行事件委派。你需要再次这样做，并放弃你的链接尝试：

$('.pages .newcomment').autogrow();
$(".pages").on('keydown','.newcomment',function(event) {

Answer 2

使用delegate()代替on()。

<强> .delegate（）

为所有匹配的元素附加处理程序到一个或多个事件   选择器，现在或将来，基于一组特定的root   元件。

jquery函数没有调用自动生成的html

2 个答案: