标题

Question

<input name="color" type="radio" data-bind="style: { backgroundImage : 'url('+$parents[1].generateSwatchImage($data)+')'}, checked: $parent.selectedOption, checkedValue: $data ,click : $parents[1].onSelectSwatchAddSlick" required />

<select name="size" required aria-required="true" id = "CC-prodDetails-sku-alphaProduct_size" data-bind="validatableTarget: selectedOption, validationOptions: {decorateElement: false, decorateElementOnModified:  false}, options: optionValues, optionsText: 'key',
                                optionsCaption: $data.optionCaption, value: $data.selectedOption, disable: $parent.disableOptions() || $data.disable, optionsAfterRender: function(option, item) { ko.applyBindingsToNode(option, {disable: !item}, item); },onRender : $parent.AlphaSelector(), event : {change : $parents[1].onSelectDropdownOptionAddSlick}">
                        </select>

handleAddToCart: function() {
        notifier.clearError(this.WIDGET_ID);
        var variantOptions = this.variantOptionsArray();
        notifier.clearSuccess(this.WIDGET_ID);
        //get the selected options, if all the options are selected.
        var selectedOptions = this.getSelectedSkuOptions(variantOptions);

        var selectedOptionsObj = { 'selectedOptions': selectedOptions };
        
        //adding availabilityDate for product object to show in the edit summary 
        //dropdown for backorder and preorder
        var availabilityDateObj = { 'availabilityDate': this.availabilityDate()};
        var stockStateObj = { 'stockState': this.stockState()};
        

        var newProduct = $.extend(true, {}, this.product().product, selectedOptionsObj, 
                                        availabilityDateObj, stockStateObj);
        
        if(this.selectedSku() && ! this.selectedSku().primaryThumbImageURL){
          this.assignSkuIMage(newProduct, this.selectedSku());
        }
        if (this.variantOptionsArray().length > 0) {
          //assign only the selected sku as child skus
          newProduct.childSKUs = [this.selectedSku()];
        }
        
        newProduct.orderQuantity = parseInt(this.itemQuantity(), 10);
        var itemQuantityInCart = this.itemQuantityInCart(newProduct);
        var stockAvailable = newProduct.orderLimit&&newProduct.orderLimit<this.stockAvailable()?newProduct.orderLimit:this.stockAvailable();
        if ((itemQuantityInCart + parseInt(this.itemQuantity(), 10)) > stockAvailable) {
          var notificationMsg = CCi18n.t('ns.productdetails:resources.totalItemQuantityExceeded', {stockAvailable: stockAvailable, itemQuantityInCart: itemQuantityInCart});
          notifier.sendError(this.WIDGET_ID, notificationMsg, true);
          return;
        }

        $.Topic(pubsub.topicNames.CART_ADD).publishWith(
          newProduct,[{message:"success"}]);

        // To disable Add to cart button for three seconds when it is clicked and enabling again
        this.isAddToCartClicked(true);
        var self = this;
        setTimeout(enableAddToCartButton, 3000);

        function enableAddToCartButton() {
          self.isAddToCartClicked(false);
        };

        if (self.isInDialog()){
          $(".modal").modal("hide");
        }
      },

我在html标记（例如输入和选择）中使用了必填，但问题是必填项的默认弹出窗口验证似乎无法正常工作如果我使用按钮上的click on事件，并且如果我删除了该事件，则需求将按预期开始工作

有人可以帮忙吗？

 <div  id="CC-prodDetails-addToCart" data-bind="inTabFlow:(validateAddToCart())" >
                <button type = "submit" class="btn primary full-width cart" data-bind="click: handleAddToCart" >
                
                </button>
            </div>

Answer 1

基本点击事件上的

return true是关键

jsClick = function () {
  console.log('jsClicked');
  return true;
};

function MyViewModel() {
  var self = this;
  
  self.koClick = function () {
    console.log('koClicked');
  };
};

ko.applyBindings(new MyViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<button onClick="jsClick()" data-bind="click: koClick">click</button>

Answer 2

我认为我已经解决了这个问题，我在表单标记上添加了数据绑定提交并在其中调用了函数，因此功能和html必需的行为都可以正常工作serialVersionUID

为什么不只在提交按钮上放置点击处理程序？

标题

您可以使用单击提交按钮来代替在表单上使用提交。但是，submit的优点是它还捕获了提交表单的其他方法，例如在文本框中键入内容时按Enter键。

**

参数

**

主要参数

您要绑定到元素的Submit事件的函数。

您可以引用任何JavaScript函数-它不一定是视图模型中的函数。您可以通过编写Submit来引用任何对象上的函数：someObject.someFunction。

视图模型上的功能有些特殊，因为您可以按名称引用它们，即，您可以编写submit：doSomething，而不必编写submit：viewModel.doSomething（尽管从技术上讲，这也是有效的）。

其他参数

无笔记有关如何将其他参数传递给您的提交处理函数或在调用视图模型中未包含的函数时如何控制此句柄的信息，请参阅与单击绑定有关的注释。该页面上的所有注释也适用于提交处理程序。

按钮上的click事件禁用了html的默认行为

2 个答案:

标题

参数