Question

我需要在元素上触发更改事件，而不考虑元素值的更改方式。

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

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

我有以下HTML：

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

这个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/

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

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

Answer 1

解雇活动

$(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;
};

Aleternate：

$("#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;
};

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

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

通过其他代码更改数据时，更改事件未在文本框上触发

1 个答案: