CODEWITHSUNDEEP
javascriptjqueryonclick
Crossman
Crossman

Reputation: 278

firing an onclick event after appending the anchor to it

Good Day,

I have been struggling to get this right for quite some time now, I would just like to know if I'm doing something terribly silly or in the lines of that.

The code gets a json object from the php and appends the information right. But I can't get it to call the function on the appended anchor tag. I first tried through jQuery with a click function through its id, but that didn't work, now I'm trying to trigger the event through 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 );
    };
});

EDIT: with on function

    $(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");
)};

Thanks in advance

Upvotes: 0

Views: 776

Answers (2)

Barmar
Barmar

Reputation: 781592

Instead of using inline event handlers, consider giving all the elements a common class and delegating the events using jQuery.on():

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

Upvotes: 1

user1726343
user1726343

Reputation:

The inline event handler won't be able to find your add function, since it is defined inside an anonymous function. Try defining add outside the document.ready handler.

Upvotes: 0

Related Questions