jquery - 在 keyup 上调整单个动态创建的文本输入的大小，该输入具有多个具有相同类的兄弟姐妹

Question

请对此提供任何帮助。我正在尝试调整 keyup 上动态创建的文本输入的大小。我可以让它在基本层面上工作，但我在调整具有相同类的单个输入的大小时遇到​​了麻烦——即，不是只有一个单独的输入字段调整大小，而是所有具有类“.question”的文本输入都在调整大小。

这是我的代码：

function resizeInput(theInputField) {
  var getInputWidth = $(theInputField).width();
  if(getInputWidth < 400){
    $(theInputField).attr('size', $(theInputField).val().length);
  }
}

$('#question-list').on('keyup', '.question', function(){
  resizeInput('.question');
});

$('#question-list') --> 这是一个 ul 元素。

$('.question') --> 这是上面 ul 中动态创建的 input[type="text"]。

Answer 1

在您的事件处理程序中，this是触发事件的元素。你可以这样做：

function resizeInput($theInputField) {      
  var inputWidth = $theInputField.width();
  if(inputWidth < 400){
    $theInputField.attr('size', $theInputField.val().length);
  }
}

$('#question-list').on('keyup', '.question', function(){
  resizeInput($(this));
});