0

$.ajax(データベースから) 更新された html のサーバーを呼び出すために使用するクリック イベントがあります。

div次に、メソッドを使用して、その html を特定の 内に配置し、.append()すでに内部にあるものを保持します。

これまでのところ、期待どおりに機能しています。私のジレンマは、新しく追加された html ごとにあります。明確にするために、私のhtmlは、リンクと非表示のスパンを持つdivにすぎません。toggle()非表示のスパンへのリンクを使用しており、その内容です。
クリック イベントが新しく追加された html をリッスンしていないため、トグルが機能していません。

簡単に修正できると思いますが、今までこれを掘り下げる必要はありませんでした。

だから、ここにページ1のコードがあります：

<div id="latestinfo">

  <div class="info">
    <a href="javascript:void(0)" class="openinfo">View This</a>
    <span style="display:none">Latest story on something</span>
  </div>
  <div class="info">
    <a href="javascript:void(0)" class="openinfo">View This</a>
    <span style="display:none">Latest story on something</span>
  </div>

</div>

<a href="javascript:void(0)" id="grabmoreinfo">Call Server for More</a>


<script language="javascript" type="text/javascript">
$(document).ready(function(){

  $(".openinfo").click(function(){  
   $(this).next('span').toggle();
  });


  $("#grabmoreinfo").click(function(){  
    $.ajax({ 
            url: "latest.php",
            data:"formId=grabmore",
            success:function(data){  $("#latestinfo").append(data); }      
    }); 
  });

});
</script>

今 latest.php:

<?php

$var = '
<div class="info">
    <a href="javascript:void(0)" class="openinfo">View This</a>
    <span style="display:none">Another story on something</span>
  </div>
';

echo $var;

?>

したがって、要約すると、メソッドは新しく追加された html に気付かないappend()間、魅力のように機能します。click()

4

4 に答える 4

1

必要なのはevent delegation、他のページからコンテンツを追加していて、その時点では利用できなかったpage loadため、イベントを静的な親にハンドラー (またはまたは.on()のようなページの読み込み時に存在していた)に委任する必要があるためです。これを行うことをお勧めします：$(document)$('body')$('#latestinfo')

$("#latestinfo").on('click', '.openinfo', function(){  
   $(this).next('span').toggle();
});

$(document)または、すべての要素の親であるにイベントを委任できます。

$(document).on('click', '.openinfo', function(){  
   $(this).next('span').toggle();
});

サイドノート：

注意: 委任されたイベントは SVG では機能しません。

于 2013-04-16T05:37:17.390 に答える
0

on動的に生成された要素に委任されたイベントを使用します...

  $("#latestinfo").on('click',".openinfo",function(){  
   $(this).next('span').toggle();
  });

on()についてもっと読む

ajaxの成功関数内でクリック関数を呼び出すこともできますが、 on委任されたイベントを使用することを好みます。

于 2013-04-16T05:33:03.963 に答える
0

ハンドラーが定義されているときにまだDOMにないコンテンツにイベントハンドラーをアタッチする場合は、「on」を使用する必要があります

標準の "CLICK" は、要素が DOM に既に存在することを前提としています

$("#latestinfo").on("click",".openinfo",function(){  
   $(this).next('span').toggle();
  });

latestinfo を「親」として使用できるようです

于 2013-04-16T05:33:48.050 に答える