如何在trigger()事件覆盖div后更新其内部子区块？

问题根源 #

你当前的代码里，trigger('change')会执行#item_id的change事件处理函数，其中$("#response_area1").html("Changed to :" + this.value);会完全替换response_area1内的所有内容，包括原本在里面的response_area2。等你后续执行$("#response_area2").html("Value Updated");时，response_area2这个元素已经被删除了，所以文本自然显示不出来。

解决方案 #

方案1：分离响应区域（最简单）

把response_area2移到response_area1外面，避免被覆盖：

<div id="response_area1"></div>
<div id="response_area2"></div>

JS代码无需修改，触发change后两个区域各自独立更新，"Value Updated"就能正常显示。

方案2：修改change事件逻辑，保留内部元素

如果必须把response_area2放在response_area1内，可以在更新时重新创建该元素：

$("#item_id").on("change", function(e) {
  // 构建包含response_area2的新内容
  const content = `Changed to :${this.value}<div id="response_area2"></div>`;
  $("#response_area1").html(content);
});

$("#submit").on("click", function(e) {
  $('#item_id').trigger('change');
  // 此时response_area2已被重新创建，可直接设置文本
  $("#response_area2").html("Value Updated");
  e.preventDefault();
});

方案3：在change事件内添加触发源判断

如果希望只有代码触发change时才显示提示，可以通过jQuery事件的isTrigger属性区分：

$("#item_id").on("change", function(e) {
  $("#response_area1").html("Changed to :" + this.value);
  // 仅当是代码触发的事件时，添加完成提示
  if (e.isTrigger) {
    $("#response_area1").append('<div id="response_area2">Value Updated</div>');
  }
});

$("#submit").on("click", function(e) {
  $('#item_id').trigger('change');
  e.preventDefault();
});

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