1

要素の値がどのように変更されたかに関係なく、要素を起動するための変更イベントが必要です。

ここでの私のユースケースは、特定のテキストボックスの値が変更されるたびにフォームの要素を変更する必要があるというものです。問題は、要素に別のボタン(ユーザーが日付を選択して最初のテキストボックスに挿入できるカレンダーボタン)が入力されていることです。

以下のサンプルを使用して、「date2」を更新できるように「date1」がいつ変更されるかを知る必要があります。 ボタンの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スキルはかなり平凡です。

DOMミューテーションに関するFabricioのコメントに関して、ブラウザーにある程度依存しないDOMミューテーションソリューションはありますか?ここで使用されるブラウザを確実に予測する方法はありません。私はIE6についてあまり心配していませんが、DOMミューテーションについて私が見たいくつかの解決策は、Chromeに焦点を合わせているようです。

4

1 に答える 1

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]')
于 2013-03-14T23:29:00.740 に答える