尝试动态创建 jQuery 点击处理程序的问题答案

【问题标题】：Problem trying to dynamically create jQuery click handlers尝试动态创建 jQuery 点击处理程序的问题
【发布时间】：2011-04-03 14:35:59
【问题描述】：

我正在使用 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() {

我还需要能够在启动附近搜索时移除点击事件。任何帮助将不胜感激。

干杯

【问题讨论】：

标签： jquery json api

【解决方案1】：

您应该可以通过以下方式获取您的 id。要删除点击事件，您可以使用 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");
)};

【讨论】：

【解决方案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/

【讨论】：

对不起，我不太明白。我的问题是我有多个表单，提交按钮类为 .gig-favourite-button 所有这些都是在搜索开始后动态创建的。当您单击任何保存按钮时，它会尝试在第一个结果表单中插入数据，而不是您单击的那个。

【解决方案3】：

如果要对多个指定类的元素进行操作，则需要使用.each()，比如这样：

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

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

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

【讨论】：