jQuery的触发器不更新2路绑定值
问题描述:
试图创建一个Chrome扩展,使用jQuery使用下面的语句来改变某些input
和textarea
值:jQuery的触发器不更新2路绑定值
$(this).val(newValue).trigger('change');
的trigger
部分的目标是通知当前页面上使用的任何双向数据绑定模块,其中input
的值已被更改。
它不起作用。
我试着用Knockout和Rivets,都做不知道input
的价值已使用上述jQuery的线路改变。
使用公认的答案here,我想:
$(this).val(newValue).change();
那请问不工作无论是。有趣的是,如果我降级到纯粹的DOM接口(即没有jQuery),那么它工作正常,并且2路绑定得到适当的值更改通知。使用下面的代码:
element.value = newValue;
element.dispatchEvent(new Event('change'));
上面的作品和我试过的所有双向绑定模块都知道值的变化。
我怎样才能达到与jQuery相同的效果?请注意,我的代码位于Chrome扩展的内容脚本中。
答
您只需更改该值并触发更改事件,该事件由大多数MVVM框架检测以更新可观察值。我不知道你的代码是如何模样,以及它为什么会失败,但这个片段的工作原理:
var vm = {
val: ko.observable('Some value'),
};
ko.applyBindings(vm, bound);
$('#changeText').on('click', function() {
$('#textInput').val('ABC');
$('#textInput').trigger('change');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bound" name="bound">
<input type="text" data-bind="value: val" id="textInput"/>
<div>
The observable is: <span data-bind="text: val"/>
</div>
</div>
<input type="button" value="Click to change" id="changeText"/>
'数据绑定在当前page'使用的模块 - 在这种情况下,你会必须在页面中注入脚本:[构建Chrome扩展 - 使用内容脚本在页面中注入代码](https://*.com/q/9515704) – wOxxOm
@wOxxOm这很有道理。我将不得不将jQuery注入页面,所以它不能单独工作。 – miniml
您可以在注入的代码中重复使用网页的jQuery。否则,请不要忘记使用'jQuery.noConflict()'。 – wOxxOm