2010-02-09 17 views
6

Tengo una fila de la tabla que contiene un cuadro de texto y tiene un onclick que muestra un calendario de JavaScript ... Estoy agregando filas a la tabla con el cuadro de texto, pero no sé cómo adjuntar el evento onclick al cuadro de texto generado por JavaScript ...Cómo adjuntar el evento OnClick para un cuadro de texto generado por 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);"> 

Y mi JavaScript genera un cuadro de texto,

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

Creo que adjuntar eventos dinámicamente no es un navegador cruzado, por lo que puede necesitar escribir un código diferente para diferentes navegadores. Sugiero usar una biblioteca JS como JQuery para ese propósito. Con JQuery es tan simple como esto: '$ ('# elementId'). Haga clic en (function() {/ * Haga lo que quiera aquí * /});' –

+1

@eyazici: La estrategia de manipulación DOM que el OP está utilizando es segura con la excepción de 'setAttribute()'. – Asaph

Respuesta

14

de esta manera:

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

BTW: Tenga cuidado con el caso sensiti vity en el DOM. Es "onclick", no "onClick".

+0

@ Asaph no funcionó 'el.onClick = function() {alert (el.id);};' –

+1

@chandru_cp: No ponga en mayúscula la "c" en "onclick". Es una minúscula "c". Ver la última línea de mi respuesta. – Asaph

+0

@chandru_cp: ¿Por qué no has aceptado esta respuesta? – Asaph

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

Tomando su ejemplo, creo que quiere hacer esto:

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

El único truco es darse cuenta de por qué es necesario para envolver su llamada displayDatePicker en el código function() { ... }. Básicamente, debe asignar una función a la propiedad onclick; sin embargo, para hacer esto, no puede simplemente hacer el.onclick = displayDatePicker(el.id), ya que esto le indicaría a javascript que ejecute la función displayDatePicker y asigne el resultado al controlador onclick en lugar de asignar la función sí mismo. Para evitar esto, crea una función anónima que a su vez llama a su displayDatePicker. Espero que ayude.

Cuestiones relacionadas