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扩展的内容脚本中。

来源

2015-11-02 miniml

'数据绑定在当前page'使用的模块 - 在这种情况下，你会必须在页面中注入脚本：[构建Chrome扩展 - 使用内容脚本在页面中注入代码]（https://stackoverflow.com/q/9515704） – wOxxOm

@wOxxOm这很有道理。我将不得不将jQuery注入页面，所以它不能单独工作。 – miniml

您可以在注入的代码中重复使用网页的jQuery。否则，请不要忘记使用'jQuery.noConflict（）'。 – wOxxOm

您只需更改该值并触发更改事件，该事件由大多数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"/>

来源

2015-11-02 09:42:28 JotaBe

jQuery的触发器不更新2路绑定值

回答

相关问题