1

我面临一个奇怪的问题。我的具体 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 将自身附加到动态生成的元素上，如如何使用 jquery 在动态生成的 textarea 上自动运行方法？

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

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

4

2 回答 2

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

这一行等价于：

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

这不适用于动态添加的元素，因为它们在绑定时不存在。on您在代码的前面部分进行事件委托。您需要再次执行此操作，并放弃链接尝试：

$('.pages .newcomment').autogrow();
$(".pages").on('keydown','.newcomment',function(event) {
于 2013-03-19T10:20:34.083 回答
-1

使用delegate()而不是on().

。代表（）

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

于 2013-03-19T10:23:45.377 回答