jquery - How to pass parameters to a javascript function on onclick? - Stack Overflow

admin管理员组

文章数量:1287884

I have a script where i want to call another function on onclick by passing parameters.I want to call remove_product function .How can i achieve this?

function load_cart(){
$('.mini-cart-products').html('');
var url = $('.ajax-url').attr('href');
var t   = 0;
// console.log(url);
$.ajax({
    url     : url,
    dataType:'json',
    success:function(result){

        if(result.length > 0)
        {
            var image       = $('.mini-cart-image a img');
            var prod_name   = $('.mini-cart-name a');
            var attribute   = $('.mini-cart-attributes');
            var pricing     = $('.mini-cart-pricing');

            $.each(result, function(key, val){

                var remove_url = val.remove;
                var barcode = val.barcode;
                var cart_id = val.cart_id;
                console.log("remove_url :"+remove_url+" barcode : "+barcode+" cart_id : "+cart_id);
                var productDiv  = $( "<div class='mini-cart-product clearfix'></div>" );                                             
                var nameDiv     = '<div class="mini-cart-name font"><a href="'+val.link+'">'+val.name+'</a></div>';
                var attributes  = $( "<div class='mini-cart-attributes'></div>" );
                var colorAttr   = '<div class="attribute"><span class="label">Colour: </span><span class="value">'+val.color+'</span></div>';
                var sizeAttr    = '<div class="attribute"><span class="label">Size&nbsp&nbsp&nbsp: </span><span class="value">'+val.size+'</span></div>';
                var remove  = '<div class="mini-cart-remove"><a onclick="remove_product(remove_url,barcode,cart_id)">Remove</a></div>';

I have a script where i want to call another function on onclick by passing parameters.I want to call remove_product function .How can i achieve this?

function load_cart(){
$('.mini-cart-products').html('');
var url = $('.ajax-url').attr('href');
var t   = 0;
// console.log(url);
$.ajax({
    url     : url,
    dataType:'json',
    success:function(result){

        if(result.length > 0)
        {
            var image       = $('.mini-cart-image a img');
            var prod_name   = $('.mini-cart-name a');
            var attribute   = $('.mini-cart-attributes');
            var pricing     = $('.mini-cart-pricing');

            $.each(result, function(key, val){

                var remove_url = val.remove;
                var barcode = val.barcode;
                var cart_id = val.cart_id;
                console.log("remove_url :"+remove_url+" barcode : "+barcode+" cart_id : "+cart_id);
                var productDiv  = $( "<div class='mini-cart-product clearfix'></div>" );                                             
                var nameDiv     = '<div class="mini-cart-name font"><a href="'+val.link+'">'+val.name+'</a></div>';
                var attributes  = $( "<div class='mini-cart-attributes'></div>" );
                var colorAttr   = '<div class="attribute"><span class="label">Colour: </span><span class="value">'+val.color+'</span></div>';
                var sizeAttr    = '<div class="attribute"><span class="label">Size&nbsp&nbsp&nbsp: </span><span class="value">'+val.size+'</span></div>';
                var remove  = '<div class="mini-cart-remove"><a onclick="remove_product(remove_url,barcode,cart_id)">Remove</a></div>';

• javascript
• jquery

Share Improve this question Follow asked Nov 20, 2015 at 10:26 piyapiya 20511 gold badge77 silver badges1515 bronze badges 1

• Dynamically adding elements may fail to call the function defined inline. So it is better you can first add the element to the element tree and then add the DOM event to the specific element\ – Shankar Sengalani Commented Nov 20, 2015 at 10:33

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

The line of remove var should be something like that.

var remove  = '<div class="mini-cart-remove"><a onclick="remove_product(\''+remove_url+'\',\''+barcode+'\',\''+cart_id+'\')">Remove</a></div>';

This will solve your problem

Sample fiddle

You can do with html onclick:

<button onclick="myFunction(param1, param2)">Click me</button>

or via jQuery

$(button).on('click', function() {
     myFunction(param1, param2);
});

Here's the same thing as other answers but without jquery: https://jsfiddle/7L5ypo2r/

var testButton = document.getElementById('test-button')

testButton.onclick = function(){
  //your code would go here
    alert("test");
};

You should declare on the top of your javascript code a member variable.

<script>

var remove_product = null;

function yourFunction () {
  remove_product = 'your_value';
}

$("#yourButton").on('click', function (event) {

 alert(remove_product);

}


</script>

本文标签： jqueryHow to pass parameters to a javascript function on onclickStack Overflow