Question

我正在组建一个Backbone应用程序作为我公司的POC，我想要包含实时更新。我正在使用SignalR来促进更新。

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

这可以很好地将input事件绑定到相关的文本框。骨干视图检测到更改并启动正确的方法。

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

到目前为止，我已尝试将input，change和keyup事件绑定到文本框中，当我使用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

更改值programmaticaly时没有触发事件。 AngularJS可以通过使用它的监视方法来实现。

您可以稍微修改一下代码：查看活动

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

无法以编程方式触发输入事件（但您可以尝试阅读this帖子），以便触发更改事件。

您的sagnalr客户代码：

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

Answer 2

您可以使用jquery

触发javascript事件

$("element").trigger("event");

希望这会有所帮助。祝你好运。

检测由另一个jquery函数创建的输入文本框中的更改

2 个答案: