Проблема при попытке динамически создавать обработчики нажатий jQuery

Question

Я использую API для создания системы поиска событий на веб-сайте, который я создаю.API возвращает данные в формате JSON, и я успешно проанализировал их в HTML с помощью jQuery.Каждый результат события имеет форму, чтобы пользователь мог сохранить результат для просмотра позже.Моя проблема заключается в создании отдельных обработчиков кликов для каждой создаваемой формы.В настоящее время каждая форма получает свой уникальный идентификатор, но моя функция ajax вызывается классом кнопки submit, который, очевидно, одинаков для всех форм в результатах поиска.В чем я не уверен, так это в том, как передать уникальные идентификаторы формы моей функции щелчка.

В цикле ниже я перебираю результаты JSON и выкачиваю их как 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>');



                            }

Запуск моего ajax-запроса запускается этим обработчиком кликов

$ ('. Gig-favourite-button'). Click (function () {

Что я должен сделатьполучить все уникальные идентификаторы формы в качестве имени экземпляра для вызова в этом обработчике, например, так:

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

Мне также нужно иметь возможность удалять события щелчка, когда начинается поиск рядом. Любая помощь будет принята с благодарностью.

Приветствия

Answer 1

Вы сможете получить свой идентификатор следующим образом.Для удаления события клика вы можете использовать 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");
)};

Answer 2

Если вы пытаетесь оперировать более чем одним элементом с указанным классом, вам нужно использовать .each (), например:

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

Но перебор классов - один из самых медленныхметоды, поскольку DOM должен идти.Я бы посоветовал дополнительно доработать селектор, если это возможно.т.е. если этот класс применяется к набору селекторов, используйте следующее:

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

Answer 3

Вместо нескольких обработчиков кликов, рассмотрите возможность использования только одного.Например:

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

Вы также можете взглянуть на http://fiddle.jshell.net/Shaz/mZ2eB/