複選框沒有在臨時的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()指令。