0

外部の .html ファイルを介して挿入する 3 つの異なるフォームがあります。フォームは 1 つずつ表示されます。ユーザーが「OK」または「戻る」を押すと、フォームが変更され、他の 2 つのフォームのいずれかが読み込まれます。これまでのところ、これは問題なく動作します。

今、私はユーザーの入力を追跡したいと思い、入力フィールドごとに個別にトリガーされるjQueryの「変更」でそれを行うことを考えましたが、うまくいきません。どんな助けでも素晴らしいでしょう！

var tabContent = new XMLHttpRequest();
tabContent.onreadystatechange = processText;
tabContent.open("GET", "tabd.html", true);
tabContent.send();

function processText() {
    if (tabContent.readyState == 4) {
    tab = tabContent.responseText;
    document.getElementById("tabholder").innerHTML += tab;
    focusOnElem();
    }
}

フォーム フィールド:

<input id="day" value="15" maxlength="2"/>

行事：

$("#day").change(function(){
    console.log("change");
});
4

3 に答える 3

1

イベントをバインドする場合、そのイベントをトリガーする要素がバインドされるために存在する必要があります。ページの読み込み時に一連の要素にイベント ハンドラーをアタッチすると、DOM に現在存在する要素のみがそのイベント ハンドラーの影響を受けます。DOM には存在しないが、後で動的に挿入される要素も含めるには、実際に存在する DOM の上位の要素にイベントを委任し、ターゲット要素がセレクターと一致するかどうかを確認する必要があります。これは委任されたイベント ハンドラーと呼ばれ、jQuery では次のようになります。

$('#tabholder').on('change', '#day', function(){
    console.log("change");
});
于 2012-12-04T16:05:57.150 に答える
0

DOM から要素を削除するたびに、関連するバインディングが失われます。再バインドする必要があり、関数に入れます

ページに日を再挿入するたびに Rebind(); を呼び出します。

function Rebind(){

      $("#day").die().change(function(){
            console.log("change");
      });

}
于 2012-12-04T16:02:23.683 に答える
0

ご協力いただきありがとうございます！私はあなたの提案を試みましたが、うまくいきませんでした。きがついた

$('#tabholder').on('change', '#day', function(){
    console.log("change");
});

他の入力ではなく、テキストエリアでのみ機能します。innerHTML ではなく値を変更しているという事実と関係がありますか?

とにかく、私にとってうまくいったのは、2つの関数を使用することです.1つは現在の値を保存し、iserがキーを押すたびに呼び出されます:

document.onkeydown = function(k) {
        memorise();
}
function memorise() {
        console.log("memorise");
        if (stage == 1) {
            dayMemo = $("#day").attr("value");
            monthMemo = $("#month").attr("value");
            console.log(dayMemo, monthMemo);
        } else if (stage == 2) {
            hourMemo = $("#hour").attr("value");
            minuteMemo = $("#minute").attr("value");
            console.log(hourMemo, minuteMemo);
        } else if (stage == 3) {
            commentMemo = $("#comment").attr("value");
            console.log(commentMemo);
        }
    }

値を取り戻すためのもので、外部ファイルから何かをロードするたびに呼び出されます。

var tabContent = new XMLHttpRequest();
tabContent.onreadystatechange = processText;
tabContent.open("GET", "tabd.html", true);
tabContent.send();

//this function gets external file and shows previous input values
function processText() {
            if (tabContent.readyState == 4) {
                tab = tabContent.responseText;
                document.getElementById("tabholder").innerHTML += tab;
                focusOnElem();
                showMemo();
            }
        }
function showMemo() {
        $("#day").attr('value', dayMemo);
        $("#month").attr('value', monthMemo);
        $("#hour").attr('value', hourMemo);
        $("#minute").attr('value', minuteMemo);
        $("#comment").attr('value', commentMemo);
    }
于 2012-12-05T09:00:12.083 に答える