Question

我很难处理以下问题。

我有一个页面，其中列出了某些用户当前关注的人。在同一页面中还有一个字段用于搜索新的联系人。使用AJAX，此搜索的结果显示在已经跟随的联系人所在的相同位置。

两种类型的人（已经跟随过一次，一次由AJAX返回）都有跟随/取消关注按钮。

问题是此按钮不适用于AJAX返回的联系人。

以下是处理此问题的代码的一部分：

$(document).ready(function (){   
    // ---------- contact search --------------
    $("#searchContacts").keyup(function(event){
        if (event.keyCode == 13){
            document.getElementById('fillText').innerHTML = "";
            var searchValue = $("#searchContacts").val();
            var userID = $("#userID").text();
            if (searchValue != ""){
                if (window.XMLHttpRequest){
                    xmlhttp = new XMLHttpRequest();
                } else {
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlhttp.onreadystatechange = function(){
                    if (xmlhttp.readyState==4 && xmlhttp.status == 200){
                        document.getElementById('fillText').innerHTML = xmlhttp.responseText;
                    }
                }
                xmlhttp.open("GET","searchContacts_server.php?contact="+searchValue+"&userID="+userID,true);
                xmlhttp.send();
            }
        }
    });

    // ---------- follow user -------
    $(".followButton").click(function(){
        var userIDToFollow = $(this).attr('name'); 
        var userID = $("#userID").text();  // getting userId from hidden filed on the page

        if (window.XMLHttpRequest){
            xmlhttpAdd = new XMLHttpRequest();
        } else {
            xmlhttpAdd = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttpAdd.onreadystatechange = function(){
            if (xmlhttpAdd.readyState==4 && xmlhttpAdd.status == 200){
                $("input[name='"+userIDToFollow+"']").val('Following');
            }
        }
        xmlhttpAdd.open("GET","followContacts_server.php?userIDToFollow="+userIDToFollow+"&userID="+userID,true);
        xmlhttpAdd.send();
    });
});

Answer 1

使用事件委派，以便AJAX也能正常工作：

变化：

$(".followButton").click(function(){

要：

$(document).on("click", ".followButton", function(){

使用ajax创建的带有jquery的Grap元素

1 个答案: