0

JQuery (1.10.1) を使用して AJAX 呼び出しを実行し、コンテンツを DIV に挿入しています。ajax DIV 内の li タグをクリックすると、アラートと AJAX メソッドがトリガーされます。これを初めて実行すると機能しますが、その後の呼び出しは失敗し、アラートが表示されません。

AJAX呼び出しが成功した後、ajax DIVをバインドする必要があると思いますが、よくわかりません。私は .on メソッドを試してから .bind を試しましたが、詳細な JQuery の理解がなければ、これ以上進むことはできません。私が見落としていた、もっと基本的なことがあるかもしれません。

test1.php:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function() { 

$('#ajax li').click(function() {    

    alert("Clicked");

    $.ajax({            
        type: "post",
        cache: false,           
        success: function(data){
            $('#ajax').load("test2.php");
        },
        error:function(){
            $("#ajax").html('Submission Error');
        }   
    }); 


});

});

</script>

</head>
<body>

<div id='ajax'>

<ul>
    <li>Example list item #1</li>
    <li>Example list item #2</li>
    <li>Example list item #3</li>
</ul>

</div><!-- Close ajax DIV -->

</body>
</html>

test2.php

<ul>
    <li data-val='100009'>Red</li>
    <li data-val='100008'>Blue</li>
    <li data-val='100007'>Green</li>
</ul>
4

2 に答える 2

4

バインディングを行うときに既存の要素から委任する必要がありますon。そのために使用できます。

変化する

$('#ajax li').click(function() {

に

$('#ajax').on('click', 'li', function() {
于 2013-06-16T15:48:19.950 に答える
1

イベント委任を使用する必要があります-

$('#ajax').on('click','li',function() {
于 2013-06-16T15:48:56.357 に答える