0

多くのページがありli、それぞれliに次のようなonclickリスナーがあります。

<?php while ($row = $allFoods->fetch()) { ?>
        <li onclick="selectFood(' <?php echo $row['Name']; ?> ')">
            <?php echo $row['Name']; ?>
        </li>
    <?php } ?>

期待どおりに機能します

検索ボタンがあります。ユーザーがそれを押すと、を使用してデータベースからデータを取得しajax、データ要素ごとにデータをに入れてli、onclickリスナーを適用します。私はこのように働いてきました：

$(document).ready(function() {
    $("#searchButton").click(function (){
        var foodToSearch = $("#foodToSearch").val();
        $.getJSON("http://localhost/TheEatTel/Food/search/"+foodToSearch+"/TRUE",function(data){
            var results = '';
            for(var i=0;i<data.length;i++){
                results +='<li onclick="selectFood('+ data[i] +')">';
                results+=data[i];
                results+='</li>';
            }
            alert(results);
            $(".afflFoods").html(results);
        });     
    });
});

データは期待どおりに表示されていますが、onclickリスナーが機能していません。つまり、新しいアイテム（ajaxを使用してデータベースから取得したもの）を押しても何も起こりません。なぜですか？解決策は何ですか、アドバイスに感謝します

4

2 に答える 2

3

これでリスナーをアタッチできますli-

$(document).on('click','li.selectFood',function(e){

          // do stuff that you'd do in selectFood()
             selectFood($(this).html());
});

selectFoodそのためには、各liに適用されるクラスとして必要です-

    <?php while ($row = $allFoods->fetch()) { ?>
        <li class="selectFood">
            <?php echo $row['Name']; ?>
        </li>
    <?php } ?>

liそうすれば、ajaxから新しく追加されたアイテムにイベントリスナーを再アタッチする必要がありません。ajaxでは簡単に行うことができます-

        ....
        for(var i=0;i<data.length;i++){
            results +='<li class=selectFood>';
            results+=data[i];
            results+='</li>';
        }
        ...
于 2013-03-17T17:53:48.207 に答える
2

に渡す文字列を引用していませんselectFood。

'<li onclick="selectFood(\''+ data[i] +'\')">';
于 2013-03-17T17:53:07.240 に答える