Question

I am using an API to create a event search engine on a website I am making. The API returns data in the JSON format and I have successfully parsed this to HTML using jQuery. Each event result has a form in it so the user can save a result to view later. My problem is with creating the individual click handlers for each form that gets created. Currently each form gets its own unique id but my ajax function is called by the submit button class which is obviously the same for all the forms in the search results. What I am unsure of is how to pass the unique form id’s to my click function.

The below loop is where I am looping through the JSON results and pumping them out as HTML

 for (var i = 0, l = events.length; i < l; i++) {
                            $('.json').append('<div class="gig-listing"><p>'+ events[i].displayName + events[i].location.city  + '<br/>' + 
                                    '<a href="' + events[i].uri +'" target="_blank" class="gig-link">More info/tickets</a></p><div id="user-preferences-gigs"><ul><?php if ($session->is_logged_in()) { ?><li class="favourite"><form class="gig-search-results" id='+[i]+'><input type="hidden" id="gid" value='+ events[i].id  +' /><input type="hidden" id="uid" value="<?php echo $session->user_id; ?>" /><button type="submit"  value="Submit" class="gig-favourite-button"><span>Favourite gig</span></button></form></li><?php } ?><li class="share_fb">Share on Facebook</li><li class="default">Explore artist</li></ul></div><br style="clear:both"</div>');



                            }

The start of my ajax request is fired by this click handler

$(‘.gig-favourite-button’).click(function() {

What I think I need to do is get all the unique form id as the instance name to call in this handler i.e. like this:

$(#’0,#1,#2,#3′).click(function() {

I also need to be able to remove the click events when a near search is initiated. Any help would be greatly appreciated.

Cheers

Answer 1

You should be able to get to your id in the following way. To remove the click event you can use unbind.

$('.gig-favourite-button').click(function() {
    var id = $(this).siblings("#uid").attr("id");
    // ajax call with id.    
    $(this).unbind("click");
    // or if you want to remove all click events $(".gig-favourite-button").unbind("click");
)};