Problem trying to dynamically create jQuery click handlers

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

Björn · Accepted Answer · 2011-04-03 14:53:23Z

2

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

answered Apr 3, 2011 at 14:53

Björn

1,6011 gold badge15 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shaz · Accepted Answer · 2011-04-03 14:54:04Z

0

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/

answered Apr 3, 2011 at 14:54

Shaz

15.9k4 gold badges44 silver badges60 bronze badges

1 Comment

Alex Vince Over a year ago

Sorry I don't quite follow. My problem is that i have multiple forms with the submit button class of .gig-favourite-button all of which are dynamically created after a search is started. When you click any of the save buttons it all ways tries to insert the data in the first results form and not the one you are clicking on.

Kirk Woll · Accepted Answer · 2011-05-11 19:28:22Z

0

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() {
}

edited May 11, 2011 at 19:28

Kirk Woll

77.8k23 gold badges189 silver badges200 bronze badges

answered May 11, 2011 at 19:22

ImpressTheNet Web Developer

3772 silver badges2 bronze badges

Collectives™ on Stack Overflow

Problem trying to dynamically create jQuery click handlers

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related