在 Jquery 上使用 keyup 的功能不止一个？

Question

我需要更改输入文本的 ID 以使用 keyup 和 Jquery 的两个功能，例如我 select 选项编号 1 在我的脚本中，我为 id 1 和其他数字 2 编写了一个函数 keyup，为了知道它是否有效，我使用 alert，但始终使用默认设置的 id .

$('#selector').change(function() {
  $('#1,#2').attr('id', $(this).val());
});
$(document).ready(function() {
  $('#1').keyup(function() {
    alert("OPTION 1 SELECTED");
  });
  $('#2').keyup(function() {
    alert("OPTION 2 SELECTED");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<select id="selector">
  <option>1</option>
  <option>2</option>
</select>
<input id="1" type="text">

怎么了？

Answer 1

您正在根据元素的原始 ID 绑定到这些元素。如果您希望绑定跟随不断变化的 ID，您必须使用事件委托。

$('#selector').change(function() {
  $('#1,#2').attr('id', $(this).val());
});
$(document).ready(function() {
  $(document).on("keyup", '#1', function() {
    alert("OPTION 1 SELECTED");
  });
  $(document).on("keyup", '#2', function() {
    alert("OPTION 2 SELECTED");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<select id="selector">
  <option>1</option>
  <option>2</option>
</select>
<input id="1" type="text">

但这似乎是一种奇怪的方法。为什么不只使用一个处理程序

alert("Option " + $("#selector").val() + " selected");

Answer 2

希望这会有所帮助

$(document).ready(function() {
  $('#selector').change(function() {

    $('#1,#2').attr('id', this.value);
  });

  $('input[type="text"]').keyup(function() {
    alert("OPTION "+$(this).attr('id')+" SELECTED");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<select id="selector">
  <option value="1">1</option>
  <option value="2">2</option>
</select>
<input id="1" type="text">

在 Jquery 上使用 keyup 的功能不止一个？

More than one function with keyup on Jquery?

jquery

keyup