Question

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

Answer 1

您可以将侦听器附加到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>';
        }
        ...

Answer 2

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

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

ajax onclick监听器不起作用

2 个答案: