CODEWITHSUNDEEP
javascriptjquery
melvnberd
melvnberd

Reputation: 3163

how to pass parameter in jquery using .on?

Good Day, this maybe a silly question :) how can I pass a parameter to an external javascript function using .on ?

view:

<script>
    var attachedPo = 0;
    $this.ready(function(){ 
    $('.chckboxPo').on('ifChecked', addPoToBill(attachedPo));
    $('.chckboxPo').on('ifUnchecked', removePoToBill(attachedPo ));
});

</script>

external script:

function addPoToBill(attachedPo){
attachedPo++;
}

function removePoToBill(attachedPo){
attachedPo--;
}

but Im getting an error! thanks for guiding :)

Upvotes: 1

Views: 197

Answers (2)

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93601

If your intention is to count how many boxes are checked, via passing variable indirectly to functions try using an object instead like this:

JSFiddle: http://jsfiddle.net/TrueBlueAussie/pBkhX/

var attachedPo = {
    count: 0
};
$(function () {
    $('.chckboxPo')
        .on('change', function () {
        if ($(this).is(':checked')) {
            addPoToBill(attachedPo);
        } else {
            removePoToBill(attachedPo);
        }
        $("#output").prepend("" + attachedPo.count + "<br/>");
    });
});

function addPoToBill(attachedPo) {
    attachedPo.count++;
}

function removePoToBill(attachedPo) {
    attachedPo.count--;
}

If it is not doing anything else you can simplify the whole thing to count checked checkboxes:

$(function () {
    var attachedPo = 0;
    $('.chckboxPo')
        .on('change', function () {
            attachedPo = $(".chckboxPo:checked").length;
    });
});

"DOM Ready" events:

you also needed to wrap it in a ready handler like this instead of what you have now:

$(function(){
    ...
});

*Note: $(function(){YOUR CODE HERE}); is just a shortcut for $(document).ready(function(){YOUR CODE HERE});

You can also do the "safer version" (that ensures a locally scoped $) like this:

jQuery(function($){
    ...
});

This works because jQuery passes a reference to itself through as the first parameter when your "on load" anonymous function is called.

There are other variations to avoid conflicts with other libraries (not very common as most modern libs know to leave $ to jQuery nowadays). Just look up jQuery.noConflict to find out more.

Upvotes: 2

Rory McCrossan
Rory McCrossan

Reputation: 337646

You need to wrap your handlers in anonymous functions:

$('.chckboxPo')
    .on('ifChecked', function() {
        addPoToBill(attachedPo);
    })
    .on('ifUnchecked', function() {
        removePoToBill(attachedPo);
    });

You can also chain the calls to on as they are being attached to the same element.

Upvotes: 5

Related Questions