0

我有一个包含许多页面的页面，li每个页面li都有一个这样的 onclick 侦听器：

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

效果很好

我有一个搜索按钮，当用户按下它时，我想从数据库中获取数据ajax，对于每个数据元素，我想将其放入 a 中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 回答