如何将onChange事件添加到元素列表，这些元素将使用当前值更新HTML？

Question

我想（以编程方式）将事件侦听器添加到HTML输入字段的列表（对象数组）中，该事件将触发更改事件，但提供当前输入中的值，而不是输入处的输入字段中的值运行添加事件的函数的时间。

在尝试尽可能晚地捕获输入字段之后，我仍然获得表单的默认值，而不是返回的当前值。至少预期的输入字段确实确实连接了更改事件侦听器，所以我就在那儿了……>。>

// only sets events with values at time of execution!

function setEvents() {

    let fieldList = [{"fld": "saleDate","type": "date"},{"fld": "pickupDate","type": "date"},{"fld": "deposit","type": "cash"}];

    for(let pair of fieldList) {

        $('#' + pair['fld']).bind('change',

            {k: pair['fld'], v: $('#' + pair['fld']).val(), t: pair['type']},

            function (event) {

                let tKey = "", tVal = "", tDate = new Date();

                switch (event.data.t) {

                    case "date":

                        tKey = event.data.k;

                        tDate = new Date(event.data.v);

                        tVal = tDate.toLocaleDateString('en-GB');

                        break;

                    default:

                        tKey = event.data.k;

                        tVal = event.data.v;

                }

                addItem(tKey, tVal);

            });

    }

}

// this function works but is HEAVILY trimmed so you can see what I'm doing with the variables

function addItem (key, val) {

    var tmpItem = document.createElement("LI");

    var tmpNode = document.createTextNode(key.toUpperCase() + ": " + val);

    tmpItem.appendChild(tmpNode);

    tmpItem.setAttribute("name", key);

    getElementById("summaryList").box.appendChild(tmpItem);

}

如上文所述，更改事件已按预期添加到元素中。我有警报，告诉我每个事件触发器都传递相同的值。aka表单的默认值。

Answer 1

我没有做的太晚了！！！我知道我必须有添加事件的代码作为从表单元素中获取当前值的位置，就像这样；function setEvents() {    let fieldList = [        {            "fld": "saleDate",            "type": "date"        },        {            "fld": "pickupDate",            "type": "date"        },        {            "fld": "deposit",            "type": "cash"        }    ],    tKey = "", tVal = "", tDate = new Date();    // begin loop through JSON of elements    for(let pair of fieldList) {        // add change event listener but don't get element value yet!        $('#' + pair['fld']).bind('change',            {k: pair['fld'], t: pair['type']},            function (event) {                // in here is where I should get current form values!                let tKey = "", tVal = "", tDate = new Date();                switch (event.data.t) {                    case "date":                        tKey = event.data.k;                        // this grabs fresh data from the form!                        tDate = new Date($('#' + event.data.k).val());                        tVal = tDate.toLocaleDateString('en-GB');                        break;                    default:                        tKey = event.data.k;                        // and so does this!!                        tVal = $('#' + event.data.k).val();                }                updateSummary(tKey, tVal);            });    }}感谢您的新鲜双眼！

Answer 2

在事件侦听器函数中获取值，而不是在绑定时获取。在事件侦听器中，this是事件目标，并且this.value是元素的值。for (let pair of fieldList) {  $('#' + pair['fld']).on('change', {      k: pair['fld'],      t: pair['type']    },    function(event) {      let tKey = "",        tVal = "",        tDate = new Date();      switch (event.data.t) {        case "date":          tKey = event.data.k;          tDate = new Date(this.value);          tVal = tDate.toLocaleDateString('en-GB');          break;        default:          tKey = event.data.k;          tVal = this.value;      }      addItem(tKey, tVal);    });}