javascript - 如何访问 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/ 有一些Public Methods也许$.colorbox.element()适合你，你可以将它分配给父js代码，然后你就可以处理它。

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

我测试它；代码落后了，但是你的关于checkbox change see的代码运行良好，也许你的代码是其他position case的问题；

添加一个切片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%'});