Question

我有一个包含文本框的表行，它有一个显示JavaScript日历的onclick ...我正在使用textbox向表中添加行，但我不知道如何将onclick事件附加到生成的JavaScript文本框...

<input  class="date_size_enquiry" type="text" autocomplete="off"
onclick="displayDatePicker('attendanceDateadd1');" size="21" readonly="readonly"    
maxlength="11" size="11"  name="attendanceDateadd1" id="attendanceDateadd1" 
value="" onblur="per_date()" onchange="fnloadHoliday(this.value);">

我的JavaScript会生成一个文本框，

    var cell2 = row.insertCell(1);
    cell2.setAttribute('align','center')
    var el = document.createElement('input');
    el.className = "date_size_enquiry";
    el.type = 'text';
    el.name = 'attendanceDateadd' + iteration;
    el.id = 'attendanceDateadd' + iteration;
    el.onClick = //How to call the function displayDatePicker('attendanceDateadd1');
    e1.onblur=??
    e1.onchange=??
    cell2.appendChild(el);

Answer 1

像这样：

var el = document.createElement('input');
...
el.onclick = function() {
    displayDatePicker('attendanceDateadd1');
};

顺便说一句：小心DOM中的区分大小写。它是"onclick"，而不是"onClick"。

Answer 2

el.onclick = function(){
  displayDatePicker(this.id);
};

Answer 3

举个例子，我想你想这样做：

el.onclick = function() { displayDatePicker(el.id); };

唯一的诀窍是要了解为什么需要在displayDatePicker代码中包含function() { ... }来电。基本上，您需要为onclick属性分配一个函数，但是为了做到这一点，您不能只执行el.onclick = displayDatePicker(el.id)，因为这会告诉javascript执行displayDatePicker函数并分配结果到onclick处理程序而不是分配函数调用本身。因此，为了解决这个问题，您需要创建一个匿名函数，然后调用您的displayDatePicker。希望有所帮助。

Answer 4

HTML5 / ES6方法：

var el = document.createElement('input')

[...]

el.addEventListener('click', function () {
  displayDatePicker('attendanceDateadd1')
})

如何为javascript生成的文本框附加OnClick事件？

4 个答案: