Как прикрепить событие OnClick для сгенерированного JavaScript текстового поля? - PullRequest
Новая
       17

Как прикрепить событие OnClick для сгенерированного JavaScript текстового поля?

8 голосов
/ 09 февраля 2010

У меня есть строка таблицы, которая содержит текстовое поле и онклик, который отображает календарь JavaScript ... Я добавляю строки в таблицу с текстовым полем, но я не знаю, как прикрепить событие 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);

Ответы [ 4 ]

17 голосов
/ 09 февраля 2010

Как это: 

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

Кстати: будьте осторожны с чувствительностью к регистру в DOM. Это "onclick", а не "onClick".

3 голосов
/ 09 февраля 2010

Если взять ваш пример, я думаю, вы хотите сделать это: 

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

Единственная хитрость заключается в том, чтобы понять, почему вам нужно обернуть ваш displayDatePicker вызов в код function() { ... }. По сути, вам нужно назначить функцию свойству onclick, однако для этого вы не можете просто сделать el.onclick = displayDatePicker(el.id), так как это скажет javascript выполнить функцию displayDatePicker и присвоить результат onclick обработчик, а не назначение самого вызова функции. Таким образом, чтобы обойти это, вы создаете анонимную функцию, которая в свою очередь вызывает ваш displayDatePicker. Надеюсь, это поможет.

3 голосов
/ 09 февраля 2010 
el.onclick = function(){
  displayDatePicker(this.id);
};
0 голосов
/ 15 июля 2018

HTML5 / ES6 подход: 

var el = document.createElement('input')

[...]

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