彩盒内的jQuery无法正常工作

Question

I have an issue with colorbox content and can't figure out what to do with it. and also, I'm not very familiar with jQuery.

I have a Colorbox which displays the usual html content (it is not iframe-d). There I have a little script for calculation depended on checkbox selection. This code works fine on a static page, but not working inside Colorbox. I read about $.colorbox.element() but didn't get it..

Here's my part of code, any help is highly appreciated

<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>

This is the part of code that calling form to be printed inside colorbox

<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

<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>

try this :)

Answer 2

Try adding all the script to the page you are displaying the colorbox on.

also look for the use of prop and attr as attr("checked") was undefined in my browser.

for example

<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

other solution with form in same page

<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>