jQuery类选择器批量初始化插件时 回调获取当前触发元素的方法

我有一个包含约50个输入框的表单，所有输入框均通过单个类选择器完成初始化，对应HTML结构如下：

<input class="common-class" id="firstname" value="Some data">
<input class="common-class" id="lastname" value="Some data">

我使用第三方插件Redactor对输入框内容执行相关操作，需要识别出当前被触发操作的输入框。初始实现代码如下：

function arbitraryPluginFunction(input) {
    /* 插件执行对应业务逻辑 */
    input.callback();
}

$(document).ready(function() {

    $(".common-class").arbitraryPluginFunction({
        initsetting1: "sample",
        initsetting2: "sample",
        callback: function() {
            console.log("You changed : " + $(this).attr("id"));
        },
    });

});

上述实现存在错误：回调函数中$(this).attr()的this指向传入插件的配置对象，而非当前触发操作的输入框DOM元素。我目前使用$.each遍历实现了临时方案，但写法不够优雅，希望了解更规范的实现方式。

编辑补充：以下是更贴近实际场景的调用代码，此前为简化问题我隐去了Redactor的具体调用逻辑：

$(document).ready(function() {

  $(".common-class").redactor({
    changeCallback: function() {
      console.log("You changed : " + $(this).attr("id"));
    });
  });

});

针对Redactor插件的使用场景，不需要额外用$.each遍历初始化，插件本身已经提供了获取当前绑定元素的标准方式：

• Redactor的所有回调函数默认会传入当前编辑器实例对象，通过实例的$el属性可以直接拿到绑定插件的原始输入框jQuery对象，完全不需要依赖this的指向
• 修正后的可运行代码如下：

$(document).ready(function() {
  $(".common-class").redactor({
    changeCallback: function(redactorCore) {
      const currentInput = redactorCore.$el;
      console.log("You changed : " + currentInput.attr("id"));
    }
  });
});

如果是其他同类jQuery插件遇到同类this指向错乱问题，有两种通用的规范处理方式：

• 初始化时通过闭包缓存当前遍历到的DOM元素引用，传入回调配置中，避免上下文被插件修改
• 不依赖插件提供的回调上下文，通过事件委托把逻辑绑定到DOM元素原生事件上，直接通过事件对象拿到触发元素

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