检测另一个jquery函数对输入文本框的更改
Detect change in input text box made by another jquery function
我正在为我的公司组装一个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);
});
});
});
以编程方式更改值时不会触发任何事件。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");
希望这会有帮助。祝你好运
相关文章:
- 让文本输入幻灯片显示输入时的新文本输入?然后向后滑动
- Sails.js:同时发布文本输入和一个文件
- 来自文本输入null的html javascript变量
- 当没有文本输入聚焦时检测空格键按下
- JS中的按钮和文本输入
- JavaScript:在调用函数的文本输入上按enter键
- jQuery自动完成功能不适用于多个文本输入
- 使用JS从选择和文本输入中捕获值,并将输出返回到HTML
- 如何通过jQuery发送选定的元素和文本输入
- HTML如何根据javascript函数的返回值限制文本输入
- jquery插件或javascript方法自动调整文本输入(而非文本区域)(固定宽度)可变高度的大小
- 在jquery中获取文本输入val始终为空
- HTML文本输入大小
- 文本输入与文本区域
- 角度ui选择标记模糊时丢失文本输入
- 文本输入值中的JavaScript变量
- Angular指令中的最佳实践是将文本输入设置为英尺和英寸的格式
- 如何在不通过模型验证的情况下屏蔽文本输入中输入的字符
- 在文本输入区域中创建双向更新
- 不使用自定义CSS或HTML(使用框架方法)的角度材质文本输入或文本区域标签大小