通过其他代码更改数据时，更改事件未在文本框上触发 [英] Change event not firing on textbox when data is changed through other code

问题描述

我需要一个更改事件来触发元素而不考虑元素值的更改方式。

I need a change event to fire on an element without regard of how the element value was changed.

我的用例是我需要更改元素每当特定文本框更改值时的表单。问题是该元素由另一个按钮填充（一个日历按钮，让用户选择一个日期，然后插入第一个文本框）。

My use case here is that I need to change elements on a form whenever a particular textbox changes value. The problem is that the element is populated by another button (a calendar button that lets the user choose a date which is then inserted in the 1st textbox).

使用下面的示例，我需要知道date1何时发生变化，以便我可以更新date2。 我不知道按钮的ID - 它是由其他工具动态生成的 - 因此我无法附加任何内容。

Using the sample below, I need to know when "date1" changes so I can update "date2". I won't know the ID of the button--its dynamically generated by another tool--so I can't attach anything to that.

我有以下HTML：

 <input type="text" id="date1" value="" />
 <input type="button" id="but1" value="click me" />
 <br/>
 <input type="text" id="date2" value="" />

这个javascript：

And this javascript:

 $(function () {

     $("#but1").click(function () {
         $("#date1").val(new Date().toLocaleDateString());
     });

     $("#date1").change(function () {
         var d = new Date($("#date1").val());
         $("#date2").val(d.addDays(7));
     });

 });

 Date.prototype.addDays = function (days) {
     var current = this;
     current.setDate(current.getDate() + days);
     return current;
 };

这是我正在使用的jsfiddle： http://jsfiddle.net/mYWJS/7/

Here is a jsfiddle I was using: http://jsfiddle.net/mYWJS/7/

更新 ：我在jsfiddle示例中添加了一个DIV包装器，希望这可能激发另一种解决方案。我自己找不到一种方法来利用它，但我的javascript技能相当平庸。

Update: I added a DIV wrapper to the jsfiddle example in hopes that might inspire another solution. I couldn't find a way to utilize it myself but my javascript skills are rather mediocre.

关于Fabricio关于DOM突变的评论，是否有一个DOM突变解决方案有点浏览器独立？我无法确切地预测将在此处使用的浏览器。我并不太关心IE6，但我看到的DOM突变的几个解决方案似乎都集中在Chrome上。

In regards to Fabricio's comment about DOM mutations, is there a DOM mutation solution that is somewhat browser independent? There is no way for me to predict with certainty the browser that will be used here. I'm not too concerned about IE6, but the few solutions I've seen for DOM mutations seem to focus on Chrome.

推荐答案

解雇活动

$(function () {

    $("#but1").click(function () {
        $("#date1").val(new Date().toLocaleDateString()).change();
    });

    $("#date1").change(function () {
        var d = new Date($("#date1").val());
        $("#date2").val(d.addDays(7));
    });

});

Date.prototype.addDays = function (days) {
    var current = this;
    current.setDate(current.getDate() + days);
    return current;
};

备注：

$("#date1").val(new Date().toLocaleDateString()).trigger('change');

编辑：鉴于您的澄清：

$(function () {
    $("#date1").next('input[type=button]').on('click',function () {
        $("#date1").val(new Date().toLocaleDateString()).change();
    });

    $("#date1").change(function () {
        var d = new Date($("#date1").val());
        $("#date2").val(d.addDays(7));
    });
});

Date.prototype.addDays = function (days) {
    var current = this;
    current.setDate(current.getDate() + days);
    return current;
};

注意：此示例将它们放在同一个表格单元格中。如果它在后续表单元格中使用：

NOTE: This example has them in the same table cell. If it is in a subsequent table cell use:

 $("#date1").next('td input[type=button]')

这篇关于通过其他代码更改数据时，更改事件未在文本框上触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！