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

Detect change in input text box made by another jquery function

本文关键字:文本 输入 另一个 jquery 函数 检测      更新时间:2023-09-26

我正在为我的公司组装一个Backbone应用程序作为POC,我想包括实时更新。我正在使用SignalR来简化更新。

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

这可以很好地将input事件绑定到有问题的文本框。主干视图检测到变化,并启动正确的方法。

但是,当我使用另一个jQuery方法更新文本框时,不会发生任何事情。一旦我从SignalR服务器收到消息,我就对jQuery进行编码,以获取消息并设置输入框的textval属性。

到目前为止,我已经尝试将inputchangekeyup事件绑定到文本框,当我使用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);
        });
    });
});

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

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

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

并没有办法通过程序触发输入事件(但您可以通过阅读这篇文章来尝试),所以您可以触发更改事件。

以及您的sagnar客户端代码:

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

您可以使用jquery 触发javascript事件

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

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