CODEWITHSUNDEEP
jqueryjsonapi
Alex Vince
Alex Vince

Reputation: 69

Problem trying to dynamically create jQuery click handlers

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

Upvotes: 0

Views: 310

Answers (3)

ImpressTheNet Web Developer
ImpressTheNet Web Developer

Reputation: 377

If you are trying to operate on more than one element with the specified class, you need to use .each(), such as this:

$('.gig-favourite-button').each(function() {
}

But iterating over classes is one of the slower methods, as the DOM has to be walked. I'd suggest further refining the selector if possible. i.e. if this class applies to a set of selectors, use the following:

$('select.gig-favourite-button').each(function() {
}

Upvotes: 0

Shaz
Shaz

Reputation: 15867

Instead of having multiple click handlers, consider using just one. For example:

var output = $("#output");

    $("body").click(function(event) {
        event = event || window.event || null;

        if (event) {
            var id = event.target.id,
                className = event.target.className;

            output.html("");

            switch (id) {
            case "test1":
                output.append("Element with the id \"test1\" was clicked<br />");
                break;

            case "test2":
                output.append("Element with the id \"test2\" was clicked<br />");
                break;

            default:
                output.html("No id case<br />");
            }

            switch (className) {
            case "test":
                output.append("Element with the class \"test\" was clicked<br />");
                break;

            default:
                output.append("No class case.<br />");
            }
        }
    });

You can also take a look at http://fiddle.jshell.net/Shaz/mZ2eB/

Upvotes: 0

Bj&#246;rn
Bj&#246;rn

Reputation: 1601

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

Upvotes: 2

Related Questions