在不实际更改DOM元素的情况下对其强制执行更改事件

force a change event on an DOM element without actually changing it

本文关键字：强制执行 情况下 事件 元素 不实际 DOM      更新时间：2023-09-26

摘要：我试图在不实际更改HTML元素的情况下，强制在HTML元素上启动更改事件，但该事件似乎没有启动。

我的场景：有一个页面（由其他人创建）旨在隐藏某些字段，直到从某个下拉列表中选择了一个值，此时将显示相关字段。但在某些情况下，下拉列表应该是自动填充的，并且默认情况下应该显示字段。因此，我试图欺骗页面，使其在第一次加载时显示相关字段。我这样做：

form.field('THEDROPDOWNFIELD').$el.trigger('change');

但什么也没发生。我发现

form.field(‘THEDROPDOWNFIELD’).setValue(form.field('THEDROPDOWNFIELD').$el[0][1].value); //dummy value, first value in the list
form.field('THEDROPDOWNFIELD').$el.trigger('change');

将触发更改事件。无论出于何种原因，$el.trigger（'change'）都不会触发更改，除非DOM元素的值确实发生了更改。问题是我不希望下拉列表中的伪值出现在那里。

摘要（再次）：当下拉列表中的选定值实际上没有更改时，是否有方法强制触发下拉列表的元素更改事件？

这个片段工作正常（使用JQuery）：

$('#toChange').bind('change', function() {
	$('#result').text('select changed');
})
$('#triggerChange').bind('click', function() {
	$('#toChange').trigger('change');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <select id="toChange">
        <option>---</option>
        <option>First</option>
        <option>Second</option>
        <option>Third</option>
    </select>
</form>
<br>
<button id="triggerChange">Click to trigger change</button>
<div id="result"></div>

您的代码似乎没有失败，所以它一定与DOM或其他人实现这种效果的方式有关。很难猜测你的问题可能是什么。所以我的建议如下：

  1. 检查它是否真的实现为在单选按钮更改时触发，而不是在与单选按钮没有直接关系的div/其他元素上的单击事件处理程序上触发
  2. 检查HTML代码是否失败
  3. 提供更多您认为可能相关的代码片段
相关文章：