jQuery中.trigger("input")无法触发事件的问题

你的问题核心是原生事件绑定与jQuery事件系统不兼容：用addEventListener绑定的input事件，无法通过jQuery的.trigger()触发——两者维护各自独立的事件回调队列。要满足你“尽可能用jQuery实现所有功能”的需求，直接把所有DOM操作和事件绑定切换到jQuery体系即可，同时适配文本宽度计算逻辑。

修改后的完整代码 #

<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
  <style>
    #myInput {
      font: normal normal 400 normal 18px / normal Roboto, sans-serif;
      min-width: 40px;
    }
  </style>
</head>
<body>
  <input value="" id="myInput" style="width: 10px;">

  <script type="text/javascript">
    function getTextWidth($el) {
      var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
      var context = canvas.getContext("2d");
      // 从jQuery对象取出原生DOM元素
      var el = $el[0];
      var font = window.getComputedStyle(el, null).getPropertyValue('font');
      var text = $el.val();

      context.font = font;
      var textMeasurement = context.measureText(text);

      return Math.min(350, textMeasurement.width);
    }

    // 改用jQuery绑定input事件
    $("#myInput").on('input', function() {
      var width = Math.floor(getTextWidth($(this)));
      console.log(width);
      var widthInPx = (width + 10) + "px";
      $(this).css('width', widthInPx);
    });

    $(document).ready(function() {
      // 统一用jQuery设置值并触发input事件
      $("#myInput").val("Hello World").trigger("input");
    });
  </script>
</body>
</html>

关键调整说明 #

• 事件绑定替换：把原生addEventListener改为jQuery的.on('input', ...)，让事件回调纳入jQuery的事件系统，确保.trigger()能正常触发
• 统一jQuery操作：所有DOM元素的取值、样式设置都用jQuery方法，避免原生与jQueryAPI混用
• 适配宽度计算函数：调整getTextWidth接收jQuery对象，内部通过[0]获取原生元素，保留原有计算逻辑不变

如果必须保留原生事件绑定，也可以在jQuery代码中用原生方法触发事件：

$("#myInput").val("Hello World")[0].dispatchEvent(new Event('input'));

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