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

只是另一种方法与其他2个答案做同样的事情而不在页面加载时绑定你的点击方法。只需将列表项上的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>

jQuery单击功能和列表项

3 个答案: