javascript - ajax onclick 监听器不起作用

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>';
        }
        ...