复选框没有在临时的jQuery UI对话框中刷新其状态

Question

我在主页面有一些复选框;当他们每个被点击时，我临时jquery ui对话框创建与它上面的一些复选框（那些不工作）;我发现第一次对话框复选框被加载，他们可以通过jquery进行检查和取消选中。如果我关闭并重新创建对话框，我无法通过jquery检查或取消选中复选框;我试着用下面的方法，但没有结果（元状态的变化，但不会刷新页面上的复选框的元素）

$('#checkbox').attr('checked', true); 
$('#checkbox').prop('checked', true); 

元状态的变化，我检查了它与

$('#checkbox').attr('checked'); 
$('#checkbox').prop('checked'); 
$('#checkbox').is(':checked'); 

代码如下：

// For each checkbox in a form in main page 
$('.first_form_cbox').each(function() 
{ 
    // When each checkbox is clicked (checked) fun_handler is called, 
    // and id of checkbox is passed to it 
    var id = $(this).attr('id'); 
    $(this).click({'id': id }, fun_handler); 
}); 

// Handler for click on main page checkbox 
function fun_handler() 
{ 
    // Dialog body is created  
    var dlg_body = '<div class="sfun_container">'; 
    // Array that holds values used by checkboxes 
    var fun_list = new Array( 
     {'name' : 'Minimum, Maximum', 'fun' : 'MMX'}, 
     {'name' : 'Average', 'fun' : 'AVG'}, 
     {'name' : 'Standard Deviation', 'fun' : 'STD'}, 
     {'name' : 'Standard Error of the Mean', 'fun' : 'SEM'}, 
     {'name' : 'Distinct Count', 'fun' : 'DCNT'} 
     ); 
    // Creates all checkboxes using values defined in fun_list 
    for (var f_index in fun_list) 
    { 
     dlg_body += '<input id="tfun_cbox_' + fun_list[f_index]['fun'] 
      + '" type="checkbox" class="tfun_cbox" value="' 
      + fun_list[f_index]['fun'] + '"/>' 
      + fun_list[f_index]['name'] + '<br/>'; 
    } 
    dlg_body += '</div>'; 
    // Creates temporary dialog 
    $('<div title="Select function(s)"><p>' + dlg_body + '</p></div>').dialog(
    { 
     modal : true, 
     width : 320, 
     resizable : false, 
     // When open 
     open : function() 
     { 
      // Gets from data-funs attribute of main page checkbox 
      // Each main page checkbox may have some functions already 
      // inserted in data-funs, if earlier some dialog checkboxes, 
      // that represent functions, were checked and their values 
      // saved in data-funs 
      var funs = $('#' + event.data['id']).data('funs'); 
      if (funs != undefined) 
      { 
       // Retrieves from funs which dialog checkboxes were checked 
       for(var f_index in funs) 
       { 
        // Checks dialog checkbox 
        $('#tfun_cbox_' + funs[f_index]).prop('checked', true); 
       } 
      } 
     }, 
     close : function() 
     { 
      if ($('.tfun_cbox:checkbox:checked').length > 0) 
      { 
       // Some dialog checkboxes are checked 
       var funs = new Array(); 
       $('.tfun_cbox:checkbox:checked').each(function() 
       { 
        // Saves dialog checked checkbox state value in funs 
        funs.push($(this).val()); 
        // Unchecks dialog checkbox 
        $(this).prop('checked', false); 
       }); 
       // Saves all checkboxes value in data-funs of main page 
       // checkbox 
       $('#' + event.data['id']).data('funs', funs); 
      } 
     }, 
     buttons : [ 
     { 
      text : "Ok", 
      click : function() 
      { 
       // Checks back main page checkbox that 
       // when clicked fired fun_handler 
       $('#' + event.data['id']).prop('checked', true); 
       $(this).dialog("close"); 
      } 
     }, 
     { 
      text : "Cancel", 
      click : function() 
      { 
       // Unchecks all dialog checkboxes in order not to save them 
       $('.tfun_cbox:checkbox:checked').prop('checked', false); 
       $(this).dialog("close"); 
      } 
     }] 
    });  
} 

如果需要，我会发布更多的代码。 谢谢

Answer 1

尽量不要使用一个id选择器，但一个类。我的意思是不要选择$（'＃checkbox'），而是选择$（'。mycheckbox'）。如果不是，你使用相同的id创建两个对象，而在第二次调用中，可能JQuery指的是旧对象。

Answer 2

我可能是错误的，因为我没有完全意识到jqueryui对话框的工作原理，但是如果您试图将事件附加到某些DOM元素上，然后再重新创建它们，他们显然会失去所有绑定的事件。 如果我需要处理未来DOM元素的事件，我可能会使用.delegate()或.on()指令。