Set attribute to a function, but don't run it

问题:

Consider the below piece of jQuery code. It sets a var based on the users selection of a few radiobuttons, it adds the value of that selection to the URL. Then, that url is set to the data-click attribute of a button.

This all works fine, if it wasn't for the fact that the function setcheckoutLocation seems to be triggered on the selection of the radiobutton. I expected the jQuery attr code to set the attribute for the selected element, not immediately run it. It only needs to run when the button itself (#directcheckoutbutton) is clicked.

jQuery(document).ready(function() {
    jQuery('input').on('change', function() { // On choice selection
       var productcode = jQuery('input:checked', '#product-options-wrapper').val(); // Get chosen value code
       var quickbuyurl = '<?php echo $_directcheckout; ?>'+productcode; // Add code to end of url

       jQuery('#directcheckoutbutton').attr('data-click', setcheckoutLocation(quickbuyurl)); // Set url as onClick for button
    });
});

I'd figure maybe the way of calling the function in this way causes the browser to read it as a executable function, rather then a (say) a string it needs to append to the attribute. But I can't seem to figure it out, I've tried to set the function in a seperate var as a string, and appending that, but it doesn't work.

回答1:

Try this.

jQuery(document).ready(function() {
    jQuery('input').on('change', function() { // On choice selection
        var productcode = jQuery('input:checked', '#product-options-wrapper').val(); // Get chosen value code
        var quickbuyurl = '<?php echo $_directcheckout; ?>'+productcode; // Add code to end of url

        jQuery('#directcheckoutbutton').attr('data-click', quickbuyurl); // Set url as onClick for button
    });
});

and then use the function on click:

jQuery('#directcheckoutbutton').on("click", function() {
    setcheckoutLocation($(this).attr('data-click'));
});

This assumes you're always using the same function setcheckoutLocation()

EDIT

You could also skip the input code and just handle it inside the click function:

jQuery('#directcheckoutbutton').on("click", function() {
    var productcode = jQuery('input:checked', '#product-options-wrapper').val(); // Get chosen value code
    var quickbuyurl = '<?php echo $_directcheckout; ?>'+productcode; // Add code to end of url

    setcheckoutLocation(quickbuyurl);
});

回答2:

The appropiate solution would be the following, using your current snippet:

jQuery(document).ready(function() {
    jQuery('input').on('change', function() { // On choice selection
       var productcode = jQuery('input:checked', '#product-options-wrapper').val(); // Get chosen value code
       var quickbuyurl = '<?php echo $_directcheckout; ?>'+productcode; // Add code to end of url

       jQuery('#directcheckoutbutton').on('click', function(){ setcheckoutLocation(quickbuyurl);}); // Set url as onClick for button
    });
});

This way the wrapped function will be executed on click.

Edit:

Just to add some explanation, in your original code you linked the result of the function setcheckoutLocation to the click event.

Which would probably be null or void, wrapping it with a simple function() {}

Defines the function, but does not execute it here yet.

You could also do something like.

var wrapperFunction = function(){ setCheckoutLocation(yourvariable); }

This way you can execute this function simply by doing wrapperFunction(); Or provide it as parameter as in the example by simply passing wrapperFunction (without the parenthesis)

Edit2: Saw that you did an data-click attr set, that wont do much, but just binding click like this works