How do I replicate onclick button results when a user clicks a DIV?

Question

I also have a text box where the user can enter a name and the objects associated to that user are returned via a query and displayed on the html page using

<div id="FriendsStuff"></div>

The code for the search function is

$(document).ready(function () {
    $(document).on('click', '.username, #find_button', function (event) {
        //debugger;
        event.preventDefault();
        friendName = $(this).is("button") ? null : $(this).text();
        friendFeed(friendName);
    });
});

I also have a div that lists the users (Instead of having to search for them) on the html page

<div id="container"></div>

Populated by this:

$('#container').append("<img class='images' src='" + imageURLs[j] + "'/>");  
     $('#container').append("<div class='username'>'" + Username[j] + "'</div>");

What I want the user to do is click on the name that is displayed on the page and replicate the same action as what happens if the user clicks the "find" button. Basically to return the associated results back to the page.

The example page is here, http://www.kudosoo.com/friendslist.html so for example the user clicks "dave" and the result is the same as if they'd entered "dave" into the text box and clicked "find"

How can I achieve this? Do I reference the container div within the onclick function?

Answer 1

I don't see a Dave at that link and I'm having a hard time following your question but I believe you're looking for .val and .trigger .

This would set the value of the input.

$('#friendsearch').val('Dave');

and then you trigger the click.

$('.btn-login').trigger('click');

You should consider putting these elements into a form.