Question

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

     $( '#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>" );   
    }
});

Answer 1

一种技巧是使用时间戳使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/

<强>更新：

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

如何在append（）上添加具有唯一ID的编辑按钮

1 个答案: