How to attach onclick event for a JavaScript generated textbox?

Question

I have a table row which contains a textbox and it has an onclick which displays a JavaScript calendar... I am adding rows to the table with textbox, but I don't know how to attach onclick event to the JavaScript generated textbox...

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

And my JavaScript generates a textbox,

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

I believe attaching events dinamically is not cross browser, so you may need to write different code for different browsers. I suggest using a JS libray like JQuery for that purpose. With JQuery it's as simple as this: `$('#elementId').click(function() { /* Do what you want here */});` — Emre Yazici, Feb 09 '10 at 05:34
@eyazici: The DOM manipulation strategy the OP is using is safe with the exception of `setAttribute()`. — Asaph, Feb 09 '10 at 05:43

score 20 · Accepted Answer · answered Feb 09 '10 at 05:33

20

Like this:

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

BTW: Be careful with case sensitivity in the DOM. It's "onclick", not "onClick".

answered Feb 09 '10 at 05:33

Asaph

159,146
25
197
199

@ Asaph it didnt work `el.onClick = function(){alert(el.id);};` – Feb 09 '10 at 05:39
1

@chandru_cp: Don't capitalize the "c" in "onclick". It's a lower case "c". See the last line of my answer. – Asaph Feb 09 '10 at 05:41
sorry one of my friend used my system – Feb 09 '10 at 08:22

Alconja · Answer 2 · 2010-02-09T05:47:21.087

Taking your example, I think you want to do this:

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

The only trick is to realise why you need to wrap your displayDatePicker call in the function() { ... } code. Basically, you need to assign a function to the onclick property, however in order to do this you can't just do el.onclick = displayDatePicker(el.id) since this would tell javascript to execute the displayDatePicker function and assign the result to the onclick handler rather than assigning the function call itself. So to get around this you create an anonymous function that in turn calls your displayDatePicker. Hope that helps.

score 3 · Answer 3 · answered Feb 09 '10 at 05:35

3

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

answered Feb 09 '10 at 05:35

Shawn Steward

6,773
3
24
45

score 3 · Answer 4 · answered Jul 14 '18 at 21:01

3

HTML5/ES6 approach:

var el = document.createElement('input')

[...]

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

answered Jul 14 '18 at 21:01

Arthur Ronconi

2,290
25
25

How to attach onclick event for a JavaScript generated textbox?

4 Answers4

Linked