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

时间:2011-04-03 14:35:59

标签: jquery json api

我正在使用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-favorite-button')。点击(function(){

我认为我需要做的是将所有唯一的表单id作为要在此处理程序中调用的实例名称,例如:

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

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

干杯

3 个答案:

答案 0 :(得分:2)

您应该能够通过以下方式获取您的身份证明。要删除click事件,您可以使用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");
)};

答案 1 :(得分:0)

不要使用多个点击处理程序,请考虑只使用一个。例如:

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/

答案 2 :(得分:0)

如果您尝试使用指定的类操作多个元素,则需要使用.each(),例如:

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

但是迭代类是较慢的方法之一,因为必须走DOM。如果可能的话,我建议进一步完善选择器。即如果此类适用于一组选择器,请使用以下命令:

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