Question

Could someone help me out converting this into a .live click?

<input class="productSubmitInput" name="AddToCart_Submit" type="submit" value="Add to Cart" onclick="AddToCart(26483,3123041,'',4,false);return false;">

Theres an AddToCart function on the onclick I need to run with the .live jquery function and I can’t understand how to convert it

Answer 1

Unless you are using a really old version of jQuery you should not use the .live() method at all. If using version 1.7 or later use the delegated form of .on(); if using older than 1.7 but newer than 1.4.2 use .delegate().

$(document).on("click", ".productSubmitInput", function() { })

is equivalent to

$(".productSubmitInput").live(function() { })

…except better because it is more efficient and more flexible. Ideally instead of $(document) you’d do $("#someForm") where "#someForm" is the form that your buttons are in.

Having said that, following is one way to convert your code. I’ll assume that the arguments you pass to the AddToCart() function are specific to each button, so you’d still need to associate them with the button somehow – I’ll use data- attributes:

<input class="productSubmitInput" name="AddToCart_Submit" type="submit"
       value="Add to Cart"
       data-param1="26483" data-param2="3123041"
       data-param3="" data-param4="4" data-param5="false">

Then, having removed the inline onclick= attribute you’d do the following in a script block:

$(document).ready(function() {
    // $(document).on("click", ".productSubmitInput", function() {
    // OR, better
    $("#yourFormIdHere").on("click", ".productSubmitInput", function() {
        var $this = $(this);
        AddToCart( $this.data("param1"), $this.data("param2"), $this.data("param3"),
                   $this.data("param4"), $this.data("param5") );
        return false;
    });
});

Of course if some of those AddToCart() parameters are the same for all buttons then you can put them directly into the JS rather than storing them as attributes in the HTML, for example if the last parameter is always false:

    AddToCart( $this.data("param1"), $this.data("param2"), $this.data("param3"),
               $this.data("param4"), false );