javascript - 检测另一个 jquery 函数对输入文本框所做的更改

Question

我正在为我的公司构建一个 Backbone 应用程序作为 POC，并且我希望包含实时更新。我正在使用SignalR以方便更新。

我正在创建的应用程序是一个计算器，因此当特定输入框中发生更新时，我希望触发许多事件监听器，从而改变它们的计算。

这可以很好地将 input 事件绑定(bind)到相关文本框。主干 View 检测到变化并触发正确的方法。

但是，当我使用另一个 jQuery 方法更新文本框时，什么也没有发生。一旦我收到来自 SignalR 服务器的消息，我就会对 jQuery 进行编码以获取该消息并设置输入框的 text 和 val 属性。

到目前为止，我已经尝试将 input、change 和 keyup 事件绑定(bind)到文本框，但在以下情况下我无法触发任何事件:我使用 jQuery 代码来更改文本框的内容。

主干应用

var SliderView = Backbone.View.extend({
    el: $("#inputElements"), 

    events: {
        "slide": "updateVal",
        "input td input#purchasePayment": "updatePurchasePay", //Text box/Event I'm working on
        "keyup td input#fixedRate": "updateFixedRate",
        "keyup td input#returnSpxUp": "updateReturnSpx"
    },

    //This method should fire anytime the value in the #purchasePayment box changes
    //This works if I'm typing in the browser, however if the values are 
    //changed via a message received from SignalR nothing happens
    updatePurchasePay: function () {
        var val = this.$el.find('td input#purchasePayment').val();
        this.model.set({ purchasePayment: val });
        console.log('Model :' + this.model.get('purchasePayment'));
    },

    updateFixedRate: function (e) {
        var val = this.$el.find('td input#fixedRate').val();
        this.model.set({ fixedRate: val });
    },

    updateReturnSpx: function (e) {
        var val = this.$el.find('td input#returnSpxUp').val();
        this.model.set({ returnSpx: val });
    },

    updateVal: function () {
        var val = this.$el.find('td div#slider').slider("option", "value");
        this.model.set({ slidervalue: val });
    }
});

jQuery

$(document).ready(function() {
    var chat = $.connection.chatHub;

    //This method receives updates from SignalR
    //Anytime a character is received I place it in the 
    //appropriate text box
    chat.client.addNewMessageToPage = function (message) {

        //Neither the change, input, or, naturally, keyup events
        //fire when these lines of code are executed. 
        $('#purchasePayment').val(message);
        $('#purchasePayment').text(message);
    }

    $.connection.hub.start().done(function () {
        //Telling the page to send whatever is in
        //a specific text box to the SignalR server
        //each time 'keyup' event is detected
        $('#PusherInput').on('keyup', function () {
            var input = $('#PusherInput').val();
            chat.server.send(input);
        });
    });
});

Answer 1

以编程方式更改值时不会触发任何事件。 AngularJS 可以通过使用它的 watch 方法来做到这一点。

您可以将代码稍微修改为: 查看事件

events: {
    //other event handlers
    "change td input#purchasePayment": "updatePurchasePay"
},

无法以编程方式触发 oninput 事件(但您可以通过阅读 this 帖子来尝试)，因此您可以触发更改事件。

以及您的 sagnalr 客户端代码:

chat.client.addNewMessageToPage = function (message) {
    $('#purchasePayment').val(message).change();
    $('#purchasePayment').text(message);
}