jquery 通过其他代码更改数据时,未在文本框上激发Change事件

o7jaxewo  于 2022-11-03  发布在  jQuery
关注(0)|答案(1)|浏览(101)

我需要一个在元素上触发的change事件,而不考虑元素值是如何更改的。
我在这里的用例是,每当一个特定的文本框改变值时,我就需要改变表单上的元素。问题是,元素由另一个按钮填充(一个日历按钮,让用户选择一个日期,然后插入到第一个文本框中)。
使用下面的示例,我需要知道“date 1”何时更改,以便可以更新“date 2”。我不知道按钮的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;
 };

下面是我使用的jsfidle:http://jsfiddle.net/mYWJS/7/

更新:我在jsfiddle示例中添加了一个DIV Package 器,希望它能激发出另一种解决方案。我自己找不到使用它的方法,但我的JavaScript技能相当平庸。

关于Fabricio关于DOM突变的评论,有没有一个DOM突变解决方案在某种程度上是独立于浏览器的?我没有办法肯定地预测这里将使用的浏览器。我不太担心IE6,但我看到的少数DOM突变解决方案似乎集中在Chrome上。

kx1ctssn

kx1ctssn1#

激发事件

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

注意:本示例中,它们位于同一个表格单元格中。如果它们位于后续表格单元格中,请使用:

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

相关问题