0

メインページにいくつかのチェックボックスがあります。それぞれをクリックすると、一時的な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");
            }
        }]
    });    
}

必要に応じて、さらにコードを投稿します。ありがとう

4

2 に答える 2

1

jqueryuiダイアログがどのように機能するかを完全に認識していないため、間違っている可能性がありますが、破棄されてから再作成されるいくつかのDOM要素にイベントをアタッチしようとすると、それらにバインドされたすべてのイベントが明らかに失われます。将来の DOM 要素のイベントを処理する必要がある場合は、おそらく.delegate()orディレクティブを使用します。.on()

于 2012-12-09T19:04:54.920 に答える
1

ID セレクターではなく、クラス セレクターを使用するようにしてください。つまり、$('#checkbox') ではなく $('.mycheckbox') を選択します。そうでない場合は、同じ ID を持つ 2 つのオブジェクトを作成しており、2 回目の呼び出しではおそらく JQuery が古いオブジェクトを参照しています。

于 2012-12-09T18:38:51.030 に答える