尝试动态创建 jQuery 单击处理程序时出现问题

Question

我正在使用 API 在我正在制作的网站上创建事件搜索引擎。 API 以 JSON 格式返回数据，我已使用 jQuery 成功将其解析为 HTML。每个事件结果都有一个表单，以便用户可以保存结果以供稍后查看。我的问题是为创建的每个表单创建单独的单击处理程序。目前，每个表单都有自己唯一的 id，但我的 ajax 函数是由提交按钮类调用的，这对于搜索结果中的所有表单来说显然是相同的。我不确定如何将唯一的表单 ID 传递给我的点击函数。

下面的循环是我循环遍历 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() {

我的内容我认为我需要做的就是获取所有唯一的表单 id 作为要在此处理程序中调用的实例名称，即如下所示：

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

我也需要能够删除启动附近搜索时的点击事件，我们将不胜感激

。

Answer 1

您应该能够通过以下方式获取您的 ID。要删除单击事件，您可以使用取消绑定。

$('.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

考虑只使用一个，而不是使用多个单击处理程序。例如：

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/

Answer 3

如果您尝试对指定类的多个元素进行操作，则需要使用 .each()，如下所示：

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

但迭代类是较慢的方法之一，因为必须遍历 DOM。如果可能的话，我建议进一步完善选择器。即，如果此类适用于一组选择器，请使用以下内容：

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