JavaScript无法按预期运行：动态元素事件绑定失效求助

嘿，我帮你找出几个导致代码不工作的关键问题啦，咱们一步步来修正：

问题1：类选择器缺失点号 #

你写的$("add-item-popup")和$("add-item-inp")都漏掉了类选择器的.！jQuery里要选中class为指定名称的元素，必须以.开头（比如$(".add-item-popup")），不然它会误以为你要找名为<add-item-popup>的HTML标签，这显然不存在，自然触发不了点击事件。

问题2：动态元素事件绑定错误 #

那个输入框是点击弹窗后动态生成的，普通的.change()方法只能给页面加载时就已经存在于DOM中的元素绑定事件。对于这种后来才创建的元素，得用事件委托——把事件绑定到一个已经存在的父元素（比如document）上，让它监听子元素的事件，这样不管子元素什么时候创建，事件都能被捕获到。

修正后的完整代码 #

<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.js"></script>
</head>
<body>
  <!-- 这里是触发弹窗的元素，你可以根据实际情况调整标签 -->
  <button class="add-item-popup">点击打开输入弹窗</button>

  <script>
    $(document).ready(function(){
      // 修正类选择器，添加.
      $(".add-item-popup").click(function(){
        var form = "<input type='text' class='add-item-inp' />";
        $.alert(form);
      });

      // 用事件委托绑定动态输入框的change事件
      $(document).on('change', '.add-item-inp', function(){
        alert($(this).val());
      });

      // 如果想要实时监听输入（每输入一个字符就触发），可以换成input事件：
      // $(document).on('input', '.add-item-inp', function(){
      //   alert($(this).val());
      // });
    });
  </script>
</body>
</html>

额外小提示 #

• 我把你代码里转义的<和>换成了直接的<和>，这样代码更易读，当然转义也不会影响功能。
• 如果希望输入框内容一变化就触发提示（而不是失去焦点时），可以把change事件换成input事件，注释里已经给出了示例。

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