如何在jQuery中向keyup事件传递输入框的类名？

错误分析 #

你之前的尝试存在两个核心问题：

1. 第二个写法里的this.classname是拼写错误，正确属性名应为className（驼峰命名）；且此处this指向的是代码执行时的上下文（并非生成的input元素），根本拿不到输入框类名，直接拼接还会引发语法错误（未加引号的字符串会被当作变量解析）。
2. 使用onkeyup="filter(this)"本身语法无问题，大概率是你的filter函数未正确处理传入的元素参数，导致看似“出错”。

解决方案 #

方案1：修正内联事件，传递元素本身（灵活推荐）

直接将输入框元素传给filter函数，在函数内部获取类名，无需提前拼接：

// 生成元素时传入this
$('.dropdown-select ul').before('<div class="dd-search"><input id="txtSearchValue" autocomplete="off" onkeyup="filter(this)" class="dd-searchbox" type="text"></div>');

对应的filter函数：

function filter(inputEl) {
  // 获取输入框类名并使用
  const inputClass = inputEl.className;
  // 此处编写过滤逻辑，示例：
  console.log('输入框类名:', inputClass);
}

方案2：直接传递类名字符串（适用于类名固定场景）

若输入框类名固定，直接写死在参数里更稳妥，注意添加引号避免语法错误：

// 用模板字符串拼接，可读性更强
$('.dropdown-select ul').before(`<div class="dd-search"><input id="txtSearchValue" autocomplete="off" onkeyup="filter('dd-searchbox')" class="dd-searchbox" type="text"></div>`);

对应的filter函数：

function filter(className) {
  console.log('传入的类名:', className);
  // 编写过滤逻辑
}

方案3：使用jQuery事件委托（最佳实践，规避内联事件）

内联事件不利于代码维护，推荐通过事件委托绑定动态生成元素的事件：

// 先添加动态元素
$('.dropdown-select ul').before('<div class="dd-search"><input id="txtSearchValue" autocomplete="off" class="dd-searchbox" type="text"></div>');

// 绑定keyup事件委托
$(document).on('keyup', '.dd-searchbox', function() {
  // 获取当前输入框的类名
  const className = this.className;
  // 调用filter函数
  filter(className);
});

// filter函数
function filter(className) {
  // 编写业务逻辑
}

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