如何访问 Colorbox 内的 JavaScript/jQuery 函数？我还没有得到满意的答案

Question

我正在为我的网站使用 PHP、jQuery/JavaScript、Colorbox - 一个 jQuery 灯箱插件、Smarty 等。现在我正在使用 Colorbox 插件在弹出窗口中显示数据。附上弹窗截图。在此弹出窗口中有几个复选框。在这些复选框的 OnChange 事件 上，我正在调用 Javascript 函数，但它没有被调用。我对此进行了大量研究，并了解了 “Colorbox 的 onComplete 回调”。我试过了，但它仍然没有调用 JavaScript 函数。弹出窗口是使用 AJAX 和 jQuery 创建的。生成弹窗的代码如下（该代码在 Checkbox 的 onChange 事件时执行）：

function get_subject_topics(sheet_type, subject_id, sheet_id) { 

    var field_id = sheet_type+'_subject_'+subject_id;   
    var chk = document.getElementById(field_id).checked;

    if($.active > 0) { 
    request_inprogress(); 
    $('#'+chk).attr('checked', false);
    $('#topics_'+subject_id).remove();   
    } else {

      if(chk==true) {
        if(sheet_type=='practice') {
         GetSubjectTopicsForPracticeSheet(sheet_type, subject_id, sheet_id);
         $("#view_"+subject_id).show(1000);
       } 
    } else {
      remove_request('#practice_sheet_loader');
      $('#topics_'+subject_id).remove();
      $("#view_"+subject_id).hide(1000); 
    }
    }
}

负责在Colorbox弹出窗口中显示数据的AJAX函数（名为GetSubjectTopicsForPracticeSheet()）如下：

function GetSubjectTopicsForPracticeSheet(sheet_type, subject_id, practice_sheet_id) {
  $.colorbox({});
  $.ajax({ 
    type: "POST",
    url: "practice_sheet.php",
    data: {'request_type':'ajax', 'op':'get_subject_topics_list', 'subject_id':subject_id, 'sheet_type':sheet_type, 'practice_sheet_id':practice_sheet_id},  
    success: function(data) {
        remove_request('#practice_sheet_loader');
        $('#subjects_topics_container').append(data);
        $.colorbox({inline:true, href:'#topics_'+subject_id, width:'80%'});

        $('.mini').prop("disabled", true);
        /*$.colorbox({onComplete:function(){
    alert("Hello");
}});*/


    }
  });

}

现在我想在 Colorbox 弹出窗口中创建的复选框的 OnChange 事件 上调用以下 JavaScript 函数，但我无法调用此函数。

function enable_topic_ques(sheet_type, subject_id, topic_id) { 

    var field_id = sheet_type+'_'+subject_id+'_'+topic_id;  
    var chk = document.getElementById(field_id).checked;
    //alert(chk);

    if(chk==true) {
        if(sheet_type=='practice') {
          $('#'+sheet_type+'_'+subject_id+'_'+topic_id+'_'+1).removeAttr("disabled");
          $('#'+sheet_type+'_'+subject_id+'_'+topic_id+'_'+2).removeAttr("disabled");
          $('#'+sheet_type+'_'+subject_id+'_'+topic_id+'_'+3).removeAttr("disabled");
        } 
    }
    else {
        if(sheet_type=='practice') { $('#someid').attr('name', 'value');
          $('#'+sheet_type+'_'+subject_id+'_'+topic_id+'_'+1).attr('disabled', 'true');
          $('#'+sheet_type+'_'+subject_id+'_'+topic_id+'_'+2).attr('disabled', 'true');
          $('#'+sheet_type+'_'+subject_id+'_'+topic_id+'_'+3).attr('disabled', 'true');
        } 
    }  
}

最后，smarty 模板中调用上述函数的代码如下：

<input type="checkbox" class="custom-check" name="{$sheet_type}_topics_{$subject_topic_data.subject_id}[]" id="{$sheet_type}_{$subject_topic_data.subject_id}_{$topic_diff_level_data.topic_id}" value="{$topic_diff_level_data.topic_id}" onChange="enable_topic_ques('{$sheet_type}', '{$subject_topic_data.subject_id}', '{$topic_diff_level_data.topic_id}'); return false;">

firebug 的控制台也没有显示错误。您能帮我在 Colorbox 弹出窗口的复选框的 OnChange 事件 上调用 Javascript 函数（命名函数 enable_topic_ques()）吗？提前致谢。

Answer 1

彩盒网站：http://www.jacklmoore.com/colorbox/ 有一些公共方法也许 $.colorbox.element() 适合你，你可以将它分配给父 js 代码，然后你可以处理它。

或者也许使用 Callbacks onLoad API 来调用 enable_topic_ques() 函数

我测试它；代码在后面，但是你的关于复选框更改的代码运行良好，也许你的代码是其他位置问题；

添加切片 html

<input type="submit" class="test-button">

添加一个js函数测试你的代码

function enable_topic_ques(sheet_type, subject_id, topic_id) {

                        // this is my add, it see it works normal
            alert('test');
            var field_id = sheet_type+'_'+subject_id+'_'+topic_id;  
            var chk = document.getElementById(field_id).checked;
            //alert(chk);

            if(chk==true) {
                if(sheet_type=='practice') {
                  $('#'+sheet_type+'_'+subject_id+'_'+topic_id+'_'+1).removeAttr("disabled");
                  $('#'+sheet_type+'_'+subject_id+'_'+topic_id+'_'+2).removeAttr("disabled");
                  $('#'+sheet_type+'_'+subject_id+'_'+topic_id+'_'+3).removeAttr("disabled");
                } 
            }
            else {
                if(sheet_type=='practice') { $('#someid').attr('name', 'value');
                  $('#'+sheet_type+'_'+subject_id+'_'+topic_id+'_'+1).attr('disabled', 'true');
                  $('#'+sheet_type+'_'+subject_id+'_'+topic_id+'_'+2).attr('disabled', 'true');
                  $('#'+sheet_type+'_'+subject_id+'_'+topic_id+'_'+3).attr('disabled', 'true');
                } 
            }  
        }

// this is my add

        $(".test-button").colorbox({inline:true, href:'.custom-check', width:'80%'});

Answer 2

这对我来说很好用：

$('#cboxLoadedContent iframe')[0].contentWindow.loadExit();

例如，这是我调用颜色框的索引：

这将创建 colobox，并在关闭它之前调用 iframe.php 中的函数 loadExit() 函数

            $.colorbox({
                href:"iframe.php",
                onCleanup:function(){
                    $('#cboxLoadedContent iframe')[0].contentWindow.loadExit();
                }
            });

希望对你有帮助， 你的迪奥戈