如何将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);
}

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

Answer 1

获取事件侦听器函数中的值，而不是绑定时。

在事件监听器中，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);
    });
}

Answer 2

我没有做得太晚!!!

我知道我必须有代码添加事件是从表单元素中获取当前值的位置，就像这样;

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);
            });
    }
}

谢谢你那双新鲜的眼睛！