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选择器而是使用class 1。我的意思是不要选择$（'＃checkbox'）而是$（'。mycheckbox'）。如果不是，你创建了两个具有相同id的对象，而在第二次调用中，JQuery可能指的是旧的。

Answer 2

我可能错了，因为我不完全了解jqueryui对话框的工作原理，但是如果你试图在某些DOM元素上附加事件，它们会被销毁，然后重新创建，它们显然会丢失所有绑定在它们上面的事件。如果我需要处理未来DOM元素的事件，我可能会使用.delegate()或.on()指令。

复选框不在临时jquery ui对话框中刷新其状态

2 个答案: