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

このダイナミックHTMLは、サーバーにajax呼び出しを行った後に生成します。

ユーザーがテキスト領域にEnterキーを入力すると、次の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を使用して動的に生成されたテキストエリアでメソッドを自動的に実行するにはどうすればよいですか？

$('.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()。

.delegate（）

ルート要素の特定のセットに基づいて、現在または将来、セレクターに一致するすべての要素の1つ以上のイベントにハンドラーをアタッチします。

于 2013-03-19T10:23:45.377 に答える