Question

美好的一天，

我一直在努力争取这个权利很长一段时间，我只是想知道我是在做一些非常愚蠢的事情还是那样。

代码从php获取一个json对象并将信息附加到正确的位置。但我不能让它在附加的锚标签上调用该函数。我首先尝试通过jQuery点击功能通过它的id，但这不起作用，现在我试图通过onclick触发事件。

    $(document).ready(function(){
    $("#searchBtn2").click(function(){
        $('#searchResults').children().remove();
        var l = document.getElementById('properSearch').value.length;
        if(l > 0){
            var searchjson = 
            {
                "search" : document.getElementById('properSearch').value
            };
            searchjs = JSON.stringify(searchjson);
            var search = {json:searchjs};
            $.ajax({
                type: "POST",
                url: "searchUsers.php",
                data: search,
                success: function(result)
                {     
                    var obj = jQuery.parseJSON(result);
                    $('#searchResults').next().remove();
                    for(var i = 0; i < obj.length; i+=1)
                    {
                        if(obj[i].user_id != localStorage.user_id)
                            $('#searchResults').append("<tr><td id = 'search_row'>" + obj[i].firstname + " " + obj[i].lastname + " </td> <td> <a OnClick = \"add();\" href = '#' id = 'friend_add' class = '" + obj[i].user_id + "' > add </a> </td> </tr> ");
                    }
                },
                error: function()
                {
                    alert('An Error has occured, please try again.');
                }
            });
        }
    });

    function add(){
        alert("clicked");
        //var theClass = this.className;
        //alert( theClass );
    };
});

编辑：带功能

    $(document).ready(function(){
    $("#searchBtn2").click(function(){
        $('#searchResults').children().remove();
        var l = document.getElementById('properSearch').value.length;
        if(l > 0){
            var searchjson = 
            {
                "search" : document.getElementById('properSearch').value
            };
            searchjs = JSON.stringify(searchjson);
            var search = {json:searchjs};
            $.ajax({
                type: "POST",
                url: "searchUsers.php",
                data: search,
                success: function(result)
                {     
                    var obj = jQuery.parseJSON(result);
                    $('#searchResults').next().remove();
                    for(var i = 0; i < obj.length; i+=1)
                    {
                        if(obj[i].user_id != localStorage.user_id)
                            $('#searchResults').append("<tr><td id = 'search_row'>" + obj[i].firstname + " " + obj[i].lastname + " </td> <td> <a href = '#' class = 'friend_add' id = '" + obj[i].user_id + "' > add </a> </td> </tr> ");
                    }
                },
                error: function()
                {
                    alert('An Error has occured, please try again.');
                }
            });
        }
    });

});

$('#searchResults').on('click', '.friend_add', (function(){
    alert("clicked");
)};

提前致谢

Answer 1

不要使用内联事件处理程序，而应考虑为所有元素提供一个公共类，并使用jQuery.on()委派事件：

$("#searchResults").on("click", ".friend_add", add);

Answer 2

内联事件处理程序将无法找到您的add函数，因为它是在匿名函数中定义的。尝试在document.ready handler。

之外定义add

在将锚附加到其后触发onclick事件

2 个答案: