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

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

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

感谢您的新鲜双眼！

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

2 个答案: