jbox里面的colorbox不起作用

Question

我有一个colorbox内容的问题，无法弄清楚如何处理它。另外，我对jQuery不是很熟悉。

我有一个Colorbox显示通常的html内容（它不是iframe-d）。在那里我有一个用于计算的小脚本，取决于复选框的选择。此代码在静态页面上正常工作，但不适用于Colorbox。我读到$ .colorbox.element（），但没有得到它..

这里是我的代码的一部分，任何帮助，高度赞赏

<script type="text/javascript"><!-- 
$('[id^=acc]').click(function() { 
    if($(this).attr("checked")) { 
     $('‪#‎total‬').text(parseInt($('#total').text()) + parseInt($(this).data('amount'))); 
     $('‪#‎monthly‬').text(parseInt($('#monthly').text()) + parseInt($(this).data('monthly'))); 
    } else { 
     $('#total').text(parseInt($('#total').text()) - parseInt($(this).data('amount'))); 
     $('#monthly').text(parseInt($('#monthly').text()) - parseInt($(this).data('monthly'))); 
    } 
}); 
//--></script> 

<span id="total">0</span> AZN 
<span id="monthly">0</span> AZN 
<input type="checkbox" class="accCheck" id="acc1" name="accessory[]" data-amount="100" data-monthly="15"/> 
<label for="acc1"><span></span>Add to credit</label> 

这是代码，调用的形式向部分内部颜色框

<script type="text/javascript"><!-- 
$(function() { 
    $("[id^=onlineCredit]").submit(function() { 
     $.post($(this).attr("action"), $(this).serialize(), function(data) { 
      $.colorbox({html:data}); 
     }, 
     'html'); 
     return false; 
    }); 
}); 
//--></script> 

Answer 1

page1.html

<span id="total">0</span> AZN 
<span id="monthly">0</span> AZN 
<input type="checkbox" class="accCheck" id="acc1" name="accessory[]" data-amount="100" data-monthly="15"/> 
<label for="acc1"><span></span>Add to credit</label> 

    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script type="text/javascript"> 
     $('#acc1').click(function() { 
      if($(this).attr("checked")) { 
       $('#‎total').text(parseInt($('#total').text()) + parseInt($(this).data('amount'))); 
       $('#‎monthly').text(parseInt($('#monthly').text()) + parseInt($(this).data('monthly'))); 
      } else { 
       $('#total').text(parseInt($('#total').text()) - parseInt($(this).data('amount'))); 
       $('#monthly').text(parseInt($('#monthly').text()) - parseInt($(this).data('monthly'))); 
      } 
     }); 
    </script> 

page2.html

012被打印

<form class="ajax" href="page1.html"> 
    <input type="submit"/> 
</form> 

<link href="http://www.jacklmoore.com/colorbox/example1/colorbox.css" rel="stylesheet"></link> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script type="text/javascript"> 
    $(function() { 
     $(".ajax").colorbox({width:"50%"}); 
    }); 
</script> 

试试这个:)

Answer 2

尝试将所有的脚本页面你显示colorbox上。

也寻找prop和attr的使用attr("checked")在我的浏览器中未定义。

例如

<script> 
    $(document).ready(function(){ 

     $('[id^=acc]').click(function() { 

     alert($(this).attr("checked")); -- this doesn't work on my browser 
     alert($(this).prop("checked")); -- this does. 

     if($(this).attr("checked")) { 
      $('‪#‎total‬').text(parseInt($('#total').text()) + parseInt($(this).data('amount'))); 
      $('‪#‎monthly‬').text(parseInt($('#monthly').text()) + parseInt($(this).data('monthly'))); 
     } else { 
      $('#total').text(parseInt($('#total').text()) - parseInt($(this).data('amount'))); 
      $('#monthly').text(parseInt($('#monthly').text()) - parseInt($(this).data('monthly'))); 
     } 
    });   

     $(function() { 
      $("[id^=onlineCredit]").submit(function() { 
       $.post($(this).attr("action"), $(this).serialize(), function(data) { 
        $.colorbox({html:data}); 
       }, 
       'html'); 
       return false; 
      }); 
    }); 
<\script> 

Answer 3

与其他形式在溶液同一页

<a id="inline" href="#myForm">myForm</a> 
<form id="myForm" style="display:none"> 
    <span id="total">0</span> AZN 
    <span id="monthly">0</span> AZN 
    <input type="checkbox" class="accCheck" id="acc1" name="accessory[]" data-amount="100" data-monthly="15"/> 
    <label for="acc1"><span></span>Add to credit</label> 
    <input type="submit"/> 
</form> 
<link href="http://www.jacklmoore.com/colorbox/example1/colorbox.css" rel="stylesheet"></link> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script type="text/javascript"> 
    $(function() { 
     $("#inline").click(function(){ 
      $("#myForm").css("display","inline"); 
     }).colorbox({inline:true, href:"#myForm",width:"50%", 
         onClosed:function(){ 
            $("#myForm").css("display","none"); 
           } 
        }); 
    }); 
    $('#acc1').click(function() { 
     if($(this).attr("checked")) { 
      $('#‎total').text(parseInt($('#total').text()) + parseInt($(this).data('amount'))); 
      $('#‎monthly').text(parseInt($('#monthly').text()) + parseInt($(this).data('monthly'))); 
     } else { 
      $('#total').text(parseInt($('#total').text()) - parseInt($(this).data('amount'))); 
      $('#monthly').text(parseInt($('#monthly').text()) - parseInt($(this).data('monthly'))); 
     } 
    }); 
</script>