當通過其他代碼更改數據時更改事件不會觸發文本框

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/

更新：我添加了一個DIV封裝到jsfiddle示例中，希望能夠激發另一種解決方案。我找不到自己使用它的方法，但我的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]')