将属性设置为函数，但不要运行它

Question

考虑下面的一段 jQuery 代码。它根据用户选择的几个单选按钮设置一个 var，并将该选择的值添加到 URL。然后，url 被设置为按钮的数据点击属性。

如果不是因为函数 setcheckoutLocation 似乎在选择单选按钮时被触发，这一切都很好。我希望 jQuery attr 代码为所选元素设置属性，而不是立即运行它。单击按钮本身 (#directcheckoutbutton) 时，它只需要运行。

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
    });
});

我想也许以这种方式调用函数的方式会导致浏览器将其读取为可执行函数，而不是（比如说）它需要附加到属性的字符串。但我似乎无法弄清楚，我试图将函数设置为一个单独的 var 作为字符串，并附加它，但它不起作用。

Answer 1

试试这个。

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
    });
});

然后点击使用函数：

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

这假定您始终使用相同的函数setcheckoutLocation()

编辑

您也可以跳过 input 代码，直接在点击函数中处理它：

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);
});

Answer 2

适当的解决方案如下，使用您当前的代码段：

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
    });
});

这样包装函数将在点击时执行。

编辑：

只是为了添加一些解释，在您的原始代码中，您将函数 setcheckoutLocation 的结果链接到了点击事件。

这可能是 null 或 void，用一个简单的 function() 包装它 {}

定义了函数，但还没有在这里执行它。

你也可以做类似的事情。

var wrapperFunction = function(){ 设置结帐位置（您的变量）； }

这样你就可以简单地通过 wrapperFunction() 来执行这个函数；或者像示例中那样通过简单地传递 wrapperFunction（不带括号）

将其作为参数提供

Edit2：看到你做了一个 data-click attr 集，这不会做太多，但像这样绑定点击就可以了

将属性设置为函数，但不要运行它

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

jquery

attributes

onclick

将属性设置为函数，但不要 运行 它

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

jquery

attributes

onclick

将属性设置为函数，但不要运行它