如何在Formvalidation.io的AJAX success回调中访问外部传入的selector参数

你的代码本身利用JavaScript的闭包特性，success回调定义在_StoreItem函数作用域内部，天然可以访问外层传入的selector参数，如果出现无法访问的情况，优先排查两个点：

• 调用_StoreItem时传入的参数是否为合法的jQuery对象/选择器字符串
• 是否有其他代码逻辑修改了selector变量的指向

如果希望更稳妥的传递参数，避免作用域变更导致的变量丢失，可以使用下面两种实现方式：

方案1：直接使用闭包（推荐，改动最小） #

提前统一转换selector为jQuery对象，避免后续调用find方法报错：

var _StoreItem = function(selector) {
  // 统一转成jQuery对象，兼容传入字符串选择器和jQuery对象的场景
  const $selector = jQuery(selector);
  FormValidation.formValidation(
    document.getElementById('demoForm'), {
      fields: {
        // ...
      },
      plugins: {
        // ...
      },
    }
  ).on('core.form.valid', function() {
    jQuery.ajax({
      type: "POST",
      url: '/tourl/xyz',
      data: $("#demoForm").serialize(),
      success: function(data) {
        if (data.val == 1) {
          // 直接访问上层作用域的$selector变量即可
          $selector.find('.rate').first().val(data.price).trigger("change");
          $selector.find('.desc').first().val(data.desc);
        }
      },
    });
  });
};

方案2：通过jQuery ajax的context参数绑定上下文 #

如果担心多层回调嵌套导致作用域混乱，可以把要传递的参数绑定到ajax的上下文对象中：

var _StoreItem = function(selector) {
  FormValidation.formValidation(
    document.getElementById('demoForm'), {
      fields: {
        // ...
      },
      plugins: {
        // ...
      },
    }
  ).on('core.form.valid', function() {
    jQuery.ajax({
      type: "POST",
      url: '/tourl/xyz',
      data: $("#demoForm").serialize(),
      // 把selector绑定到当前ajax请求的上下文
      context: { $selector: jQuery(selector) },
      success: function(data) {
        if (data.val == 1) {
          // 通过this访问绑定的参数
          this.$selector.find('.rate').first().val(data.price).trigger("change");
          this.$selector.find('.desc').first().val(data.desc);
        }
      },
    });
  });
};

内容的提问来源于stack exchange，提问作者rjcode