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路綁定值

回答

相關問題