Обнаружить изменение в текстовом поле ввода, сделанное другой функцией jquery

Question

Я собираю приложение Backbone как POC для своей компании, и я бы хотел включить обновления в реальном времени. Я использую SignalR, чтобы облегчить обновление.

Приложение, которое я создаю, является калькулятором, поэтому, когда обновление происходит в определенном поле ввода, я хочу, чтобы несколько прослушивателей событий погасли, изменив их вычисления.

Это прекрасно работает, связывая событие input с текстовым полем. В представлении с базовой сетью обнаружены изменения, и правильные методы срабатывают.

Однако, когда я обновляю текстовое поле, используя другой метод jQuery, ничего не происходит. Как только я получаю сообщение с сервера SignalR, у меня есть jQuery, закодированный, чтобы принять сообщение и установить поля ввода text и val.

До сих пор я пытался связывании input, change и keyup события в текстовом поле, и я не могу получить любой огонь, когда я использую код JQuery для изменения содержимого текстового поля.

Backbone приложение

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" 
}, 

Там нет никакого способа запуска oninput события programmaticaly (но вы можете попробовать, читая this почты), так что вы можете вызвать событие изменения.

И ваш sagnalr код клиента:

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

Answer 2

Вы можете вызвать JavaScript событие с JQuery

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

Надеется, что это будет полезно. Удачи.