CODEWITHSUNDEEP
jqueryhtmlajax
BlackReaper
BlackReaper

Reputation: 51

How to modify html element with jQuery generated from ajax?

I have a text field and if user type something in it, I want to show suggestion of names with ajax then user will select any name that will be set in the text field then user can submit the form.....

<form>
    <input type="text" id="name" name="name" value="" />
    <input type="submit" value="Submit" />
</form>

here is the form.... guess after getting the response from ajax I displayed the suggestion in a div then if user select/click any name that name will be in the value of the text field.... but the problem is when I display the name then I can't access it later with jQuery.... any help??

<div class="ajax-response">
    <p>Name 1</p>
    <p>Name 2</p>
    <p>Name 3</p>
    more like this.........
</div>

Upvotes: 0

Views: 694

Answers (2)

Lu&#237;s Soares
Lu&#237;s Soares

Reputation: 6202

Yes you can. After you add the response to the document you can do stuff like:

$('.ajax-response p').click(function(ev) {
    var clickedEl = $(ev.currentTarget); 
    // do stuff
});

Upvotes: 0

Anthony Grist
Anthony Grist

Reputation: 38345

You've got a div element with a class of ajax-response that contains a series of p elements that have text which is your names. The easiest solution would be to delegate an event handler to p elements inside div.ajax-response, like so:

$('div.ajax-response').on('click', 'p', function(e) {
    // one of your names was clicked on
    $('#name').val($(this).text()); // set the value of your #name input to be the text of the clicked element
});

Note that this requires the same .ajax-response element to always exist on your page, and the code would need to be called at a point when that element exists in the DOM (e.g. from a DOM ready handler).

Upvotes: 1

Related Questions