如何为无类名ID的单个input绑定jQuery事件及解决多div回车触发问题

嘿，我来帮你搞定这两个jQuery相关的问题：

一、不使用类名和ID，为单个input绑定事件 #

其实有不少灵活的方式可以定位到目标input，不用依赖类名或ID：

• 如果页面里只有这一个input，直接用标签选择器就能精准命中：

  $('input').on('click', function() {
    // 这里写你的事件逻辑
    console.log('单个input被触发啦');
  });
  

• 如果页面有多个input，但你要选特定的某一个，可以用索引或伪类选择器：
  • 选第一个input：$('input:first').on('keydown', function() { ... })
  • 选第N个input（索引从0开始）：$('input').eq(2).on('change', function() { ... })
  • 也可以结合上下文定位，比如目标input在页面第3个div里：$('div:nth-child(3) input').on('focus', function() { ... })

二、解决回车时所有div都生成列表的问题 #

这个问题的核心是你没有锁定当前输入框所在的div，而是操作了页面上所有的div。咱们只需要在事件回调里用$(this)来定位当前触发事件的input，再找到它对应的父div就行：

先看看你可能写错的代码（导致所有div都生成列表）：

$('input').on('keydown', function(e) {
  if(e.keyCode === 13) {
    // 这里选了所有div，所以每个都会添加列表
    $('div').append('<ul><li>新列表项</li></ul>');
  }
});

改成下面的写法就没问题了：

$('input').on('keydown', function(e) {
  if(e.keyCode === 13) {
    e.preventDefault(); // 记得阻止回车的默认提交行为，避免页面跳转
    // 找到当前输入框所在的最近的div父元素
    const targetDiv = $(this).closest('div');
    // 只在这个目标div里添加新列表
    targetDiv.append('<ul><li>新生成的列表项</li></ul>');
  }
});

解释下关键部分：$(this)指向的就是当前按下回车的那个input元素，closest('div')会向上遍历DOM树，找到离它最近的div父元素——这样就精准锁定了当前输入框所在的容器，不会影响其他div啦。如果你的input是嵌套在div的子元素里，closest依然能准确找到上层的目标div，比parent()更灵活。

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