Question

所以我有一个页面通过以下ajax函数将数据加载到页面中。

$(document).ready(function(){             
                function loadData(page){                  
                    $.ajax
                    ({
                        type: "POST",
                        url: "inc/load_data.php",
                        data: "p="+page+"XXXXXXXXXXX",
                        success: function(msg)
                        {
                            //alert(msg);
                            $("#container").ajaxComplete(function(event, request, settings)
                            { 
                                $("#container").html(msg);
                                //**MODIFIED CODE
                                $(document).delegate('a.vote_up','click', f_vote_up);   
                            });
                        }
                    });
                }
  });

//已加载的消息

$msg.='<span class="vote_buttons" id="vote_buttons'.$row['id'].'">
       <a href="javascript:;" class="vote_up" id="'.$row['id'].'"></a>
       <a href="javascript:;" class="vote_down" id="'.$row['id'].'"></a>
    </span>';

加载的消息有一些链接需要使用另一个Ajax函数（如下所示），这显然不起作用。在将数据加载到页面之前加载第二个函数（下面）。我怀疑，可能是因为在加载数据之前加载了这个函数，第二个函数没有识别单击vote_up。有没有办法解决它？我对AJAX不太熟悉，我真的很感激一些帮助..谢谢

$(function(){
    $("a.vote_up").click(function(){
    //get the id
    alert("Hi");
        //REST OF THE CODE
}

// ***新功能

function f_vote_up(){
    //get the id
    the_id = $(this).attr('id');

    //REST OF THE CODE
    $("span#vote_buttons"+the_id).html("Hello, Testing Response!");
    alert("End of Func!"); // <
}

Answer 1

当您调用第二个函数时，它只会抓取页面上当前存在的所有a.vote_up个元素。当您稍后向页面添加更多链接时，他们不知道是否会收听点击。

你可以做以下两件事之一来解决这个问题：

将点击侦听器添加到每个新链接时，将其添加到DOM。但这有点工作，因为你必须改变你的AJAX函数构建链接的方式，你必须将这个点击监听器分配功能变成你可以随时使用的独立功能。

而不是使用click方法，而是使用delegate方法：

$(document).delegate('a.vote_up', 'click', function () { ... });

More info on event delegation with jQuery.

Answer 2

加载html

后，您应该绑定点击事件

   $.ajax
                        ({
                            type: "POST",
                            url: "inc/load_data.php",
                            data: "p="+page+"XXXXXXXXXXX",
                            success: function(msg)
                            {
                                //alert(msg);
                                $("#container").ajaxComplete(function(event, request, settings)
                                { 
                                    $("#container").html(msg);
                                       $("a.vote_up").click(function(){
                                      //get the id
                                       alert("Hi");
                                       //REST OF THE CODE
                                         });
                                });
                            }
                        });

Answer 3

您可以使用live函数将事件绑定到动态创建的元素，即：

$("a.vote_up").live('click', function(){
        //get the id
        alert("Hi");

    });

http://api.jquery.com/live/

这将有效地将此click事件绑定到与a.vote_up选择器匹配的所有元素，无论是现在还是将来。

为.html（）数据加载重新加载Ajax / Javascript

3 个答案: