0

我通过外部 .html 文件插入了三种不同的表单。表格一次显示一个。当用户按下“确定”或“返回”时，表单会更改并加载其他两个表单之一。到目前为止，这工作正常。

现在我想跟踪用户的输入，并考虑使用为每个输入字段分别触发的 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

谢谢你的帮助！我尝试了你的建议，但没有奏效。我注意到

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

仅适用于 textarea 而不是任何其他输入。这是否与我正在改变它们的价值而不是innerHTML这一事实有关？

无论如何，对我有用的是使用两个函数，一个用于存储当前值，并且在 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 回答
0

每次从 dom 中删除一个元素时，它都会丢失其关联的绑定。你需要重新绑定，把它放在一个函数中

每次您将日期重新插入页面调用 Rebind();

function Rebind(){

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

}
于 2012-12-04T16:02:23.683 回答