html - jQuery点击功能和列表项

Question

最近，我遇到了 jQuery 点击事件的问题。在此示例中，我想在用户单击列表项时使用 ajax post。Firebug 上没有弹出错误，并且 jquery 脚本在代码中。当我运行代码时，什么也没有发生。代码如下。

<script type="text/javascript" >
$('#pop').click(function() {
var pop = 'pop';
$.post('ajax_file.php', {
    style: pop
    }, function(data) {
        $('#tube').html(data);  
        });});
</script>

<ul>
    <li id="pop">Pop</li>
</ul>

Answer 1

试试这个：

$(document).ready(function(){
   $('#pop').click(function() {
       var pop = 'pop';
       $.post('ajax_style_homepage.php', {
         style: pop
       }, function(data) {
           $('#tube').html(data);  
       });
    });
})

Answer 2

将它包装在文档ready函数中，看看会发生什么。你也不需要清空。您可以调用该html方法，它将覆盖内容。

$(function(){
   $('#pop').click(function() {
        var pop = 'pop';
        $.post('ajax_style_homepage.php', { style: pop}, function(data) {
            $('#tube').html(data);  
        });
    });
});

Answer 3

与其他两个答案相同的另一种方法，而无需在页面加载时绑定您的点击方法。只需将列表项上的 onclick 属性设置为包含 ajax 调用的函数。在我看来，这更容易理解。

<script type="text/javascript" >
function makeAJAXPost(){
    var pop = 'pop';
    $.post('ajax_file.php', {
        style: pop
        }, function(data) {
            $('#tube').html(data);  
    });     
}
</script>

<ul>
    <li onclick="makeAJAXPost()" id="pop">Pop</li>
</ul>