jQuery 小部件。如何取当前的可修改元素？

Posted 2023-05-08

【中文标题】jQuery 小部件。如何取当前的可修改元素？

【英文标题】：jQuery Widget . How to take the current modifiable element?

【发布时间】：2018-09-06 23:58:57

【问题描述】：

我有一个装有货物的篮子。当你改变篮子里的货物数量时，我必须通过这个已经改变的领域。如何提交当前的可编辑字段？

define([ 'jquery', 'jquery/ui' ], function($) 
  "use strict";
  $.widget('web4pro.cart', 
    options: 
      triggerEvent: 'change',
      controller: 'http://developer.loc/web4pro_cart/query/custom',
      qty: '[data-role="cart-item-qty"]'
    ,
    _create: function() 
      this._bind();
    ,
    _bind: function() 
      var self = this;
      self.element.on(self.options.triggerEvent, function() 
        self._ajaxSubmit();
      );
    ,
    _ajaxSubmit: function() 
      //jQuery(this.options.qty).on('change', function () 
      console.log(this.element.find(this.options.qty).on('change', this._updateOrderHandler).val());
      jQuery.ajax(
        url: 'http://developer.loc/web4pro_cart/query/custom',
        type: 'post',
        dataType: 'json',
        data: 'qty=' + jQuery('[data-role="cart-item-qty"]').val(),
        success: function(res) 
          alert('ajax send');
          console.log('ajax success');
          console.log(JSON.stringify(res));
        
      );
      //);
    ,
    _updateOrderHandler: function() 
      $(this).trigger('change');
    
  );
  return $.web4pro.cart;
);

【问题讨论】：

你想什么时候提交数据？改变，keydown，模糊？您需要事先进行任何验证吗？

【参考方案1】：

您可以使用 onBlur 方法并调用更新函数。

【参考方案2】：

我找到了解决办法。

define([
        'jquery',
        'jquery/ui'
    ], function($) 
        "use strict";
        $.widget('NameSpace.widget', 
            options: 
                triggerEvent: 'change',
                controller: 'frontName/query/custom',
                qty: '[data-role="cart-item-qty"]',
                itemId: '.action.action-edit'
            ,

            _create: function() 
                this._bind();
            ,

            _bind: function() 
                var self = this;
                    self._ajaxSubmit();

            ,

            _ajaxSubmit: function() 
                jQuery(this.options.qty).on('change', function () 
                    var that = this;
                   // here we need to refer to the context of jQuery
                    var url = domine + 'NameSpace_widget/query/custom';
                    jQuery.ajax(
                        url: url,
                        type: 'post',
                        dataType: 'json',
                        data: //your data,
                        success: function(res) 
                            // your code
                        
                    );
                );
            ,

            _updateOrderHandler: function () 
                $(this).trigger('change');
            
        );
        return $.NameSpace.widget;
    );