ajax onclick监听器不起作用

时间:2013-03-17 17:50:24

标签: javascript jquery ajax

我的网页包含许多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的数据库)时没有发生任何事情,为什么请?什么是解决方案,谢谢你的建议

2 个答案:

答案 0 :(得分: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 } ?>

这样您就不必将事件侦听器重新附加到ajax中新添加的li项。 在ajax中你可以简单地做 -

        ....
        for(var i=0;i<data.length;i++){
            results +='<li class=selectFood>';
            results+=data[i];
            results+='</li>';
        }
        ...

答案 1 :(得分:2)

您没有引用传递给selectFood的字符串。

'<li onclick="selectFood(\''+ data[i] +'\')">';