Javascript 在不丢失上下文的情况下组合绑定事件

我在表行上有两个事件绑定，一个用于

focus

，这样我就可以在更改文本输入之前获取它的值。然后，我将.change事件绑定到该事件，这样我就可以在仍然具有上一个值的情况下处理它

但是，在.change函数中，“this”现在是正在更改的输入表，而不再是输入元素本身。我做错了什么

(function() {
            var previousName;

            $(".RowClassName").on("focus", ".columnClassName td:first-child input", function() {
                previousName = this.value;
            }).change(function() {
                $(this).width($(this).val().length * 9);

                UpdateList(previousName, this.value);
            });
        })();

^此调用解析为

.RowClassName

元素，而不是事件委派筛选器中使用的

输入

元素

试着这样做：

var filter = ".columnClassName td:first-child input";

$(".RowClassName").on("focus", filter, function() {
    previousName = this.value;
}).on("change", filter, function() {
    $(this).width($(this).val().length * 9);
    UpdateList(previousName, this.value);
});

var previousName = '';
$(".RowClassName").on("focus", ".columnClassName td:first-child input",    
   function() {
       previousName = this.value;
 })

$(".RowClassName").on("change", ".columnClassName td:first-child input",
   function() {
       $(this).width($(this).val().length * 9);
       UpdateList(previousName, this.value);
});

---

您将

change

事件绑定到行，而不是输入；您应该尝试以下方法：

var filter = ".columnClassName td:first-child input";

$(".RowClassName").on("focus", filter, function() {
    previousName = this.value;
}).on("change", filter, function() {
    $(this).width($(this).val().length * 9);
    UpdateList(previousName, this.value);
});

var previousName = '';
$(".RowClassName").on("focus", ".columnClassName td:first-child input",    
   function() {
       previousName = this.value;
 })

$(".RowClassName").on("change", ".columnClassName td:first-child input",
   function() {
       $(this).width($(this).val().length * 9);
       UpdateList(previousName, this.value);
});

---

为什么

这个

指的是表格，其他答案中已经解释过了

为避免重复选择器，可以将以下内容存储在变量或事件处理程序中：

(function() {
    var previousName;
    $(".RowClassName").on(
      {
         focus: function() { 
           previousName = this.value;
         },
         change: function() {
           $(this).width($(this).val().length * 9);
           UpdateList(previousName, this.value);
         }
      },
      '.columnClassName td:first-child input'
    );
}());

---

按照绑定

焦点

处理程序的方式绑定处理程序。@SexyTurnip行是动态添加的，所以这不起作用吗？@FelixKling so

$（“.RowClassName”）。on（“焦点”，“.columnClassName td:first child input”，function（）{previousName=this.value；}）。on（“更改”，“.columnClassName td:first child input”，function（）…

？没有办法每次都重写同一个选择器？我明白你在第一部分中所说的，但那部分是有效的，焦点后的“this”确实是输入元素。对，因为当你使用事件委派时（由传递给（，）上的

.on的额外选择器/过滤器指示，jQuery将处理程序绑定到与该过滤器匹配的元素（即
输入
标记）。但是，
.on（）
函数本身仍然遵循正常的链接行为，并返回调用它的同一jQuery集合（哪个集合与
.RowClassName
选择器匹配）。感谢您的解释，这很有帮助！我是否需要将
previousName
移动到此实现中的全局变量？不，您可以像现在这样做。为什么会有所不同？明白了！我编辑了您的答案以包含该变量，希望您不介意。