-1

我仍在处理我的代码，这与我之前的问题How to add new list not to replace the list 相关。我已经得到了这个问题的答案，但另一个问题是，我需要为每个列表添加编辑按钮/链接。这个按钮/链接将打开相同的模态窗口。我确实为每个列表尝试了类似的编辑按钮，但它没有在点击时打开模态窗口，可能是因为 id 不是唯一的。我不知道如何使 id 在 jquery 中唯一。请帮忙。

     $( '#saveHoliday')
  .click(function() {
    var radio = $('#s1').val();
    var week = $('#s2').val();
    var day = $('#s3').val();

    $( "#dialog-form-holiday" ).dialog( "close" );
    $("html,body").css("overflow","auto");
    if(radio == '1'){
        $( "#summary" ).append( "<li class='holi'>Every Week&nbsp;&nbsp;<span class='button_form' id='editHoliday2' style='cursor:pointer;'>EDIT</span></li>" );    
    }   
    else if(radio == '2'){
        $( "#summary" ).append( "<li class='holi'>By Week&nbsp;&nbsp;<span class='button_form' id='editHoliday3' style='cursor:pointer;'>EDIT</span></li>" );   
    }
});
4

1 回答 1

0

一种技术是使用时间戳使 id 唯一：

var now = (new Date()).getTime();

$( "#summary" ).append( "<li class='holi'>Every Week&nbsp;&nbsp;<span class='button_form' id='editHoliday" + now.toString() + "' style='cursor:pointer;'>EDIT</span></li>" );

您还可以重新编写例程以实际创建元素，而不是为它们生成标记：

$('#saveHoliday').click(function (e) {
    var radio = $('#s1').val(),
        week = $('#s2').val(),
        day = $('#s3').val(),
        now = (new Date()).getTime(),
        edit = $('<span />').addClass('button_form').attr('id', 'editHoliday' + now.toString()).css('cursor','pointer').text('EDIT'),
        li = $('<li />').addClass('holi'),
        text = $(document.createTextNode(''));
    $( "#dialog-form-holiday" ).dialog( "close" );
    $("html,body").css("overflow","auto");
    if(radio == '1') {
        text.html('Every Week&nbsp;&nbsp;');
        li.append(text).append(edit);
        $('#summary').append(li);
    } else if(radio == '2') {
        text.text('By Week');
        li.append(text);
        $('#summary').append(li);
    }
});

这通常是一种更好的做法，因为它可以使您的代码不那么脆弱。您也不必担心关闭标记中的元素，它可以更轻松地设置属性，而无需求助于字符串连接。

更新：

您遇到的具体问题是您的点击处理程序仅绑定到document.ready. 绑定处理程序时，您的edit按钮不存在。

要解决此问题，请使用.on委托处理程序：

$(document).on('click', 'span[id^="editHoliday"]', function() {
    ...
});

更新小提琴：http: //jsfiddle.net/gJtt6/16/

更新：

对于咯咯笑，这是一个使用类而不是 ids 的特定小提琴的演示（因此不需要唯一性）：http: //jsfiddle.net/gJtt6/17/

于 2013-11-07T01:20:29.200 回答