2

ページ1

<html>
<head>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
</head></head>
<body><div id="main"></div> </body>
<script>$('div[id=main]').load('page2.php')
$('span[id*=temp]').on('click',function(){
alert(this.id); }); //this block of code not working!!
</script>
</html>

ページ2

<div>
<span id="temp">
this is demo
</span>
</div>

基本的に、タグがクリックされたときにメイン div に page2 を再度ロードしたいのですが、ページ 1 のタグの ID をフェッチできません。ページ 1 のスクリプトがページ 2 のアイテムまたはタグに対して機能しません。

4

2 に答える 2

1

AJAX 呼び出しの直後にイベントをバインドしようとしているため、要素はまだ存在しません。呼び出しは非同期であるため、コードの実行を停止して応答を待機することはありません。

メソッドのsuccessコールバックを使用して、コンテンツがロードされた後に要素をバインドします。load

$('div#main').load('page2.php', function(){
  $('span[id*=temp]').on('click', function(){
    alert(this.id);
  });
});

またはデリゲートを使用して、イベントを親要素にバインドします。

$('div#main').load('page2.php');
$('div#main').on('click', 'span[id*=temp]', function(){
  alert(this.id);
});
于 2013-01-28T19:34:39.240 に答える
0

動的に作成された要素を考慮して、親セレクターを指定する必要があるためです。

例：

$("#main").on('click', 'span[id*="temp"]', function() {alert('Handler is working!');})

ここに良い関連する質問があります: jQuery 1.7 on() and off() methods for dynamic elements

于 2013-01-28T19:26:56.593 に答える