2010-02-09 14 views
6

Ich habe eine Tabellenzeile, die ein Textfeld enthält und es hat einen onclick, der einen JavaScript-Kalender anzeigt ... Ich füge Zeilen der Tabelle mit Textfeld hinzu, aber ich weiß nicht, wie onclick-Ereignis an das JavaScript-generierte Textfeld anhängen ...Wie Anfügen von OnClick-Ereignis für eine Javascript-generierte 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);"> 

Und mein JavaScript erzeugt eine 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); 
+1

Ich glaube, das Anfügen von Ereignissen dynamisch ist nicht Cross-Browser, so dass Sie möglicherweise anderen Code für verschiedene Browser schreiben müssen. Ich empfehle, zu diesem Zweck eine JS-Bibliothek wie JQuery zu verwenden. Mit JQuery ist es so einfach: '$ ('# elementId'). Click (function() {/ * Mach was du willst * /});' –

+1

@eyazici: Die DOM Manipulationsstrategie, die das OP benutzt, ist sicher mit Ausnahme von 'setAttribute()'. – Asaph

Antwort

14

So:

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

BTW: Seien Sie vorsichtig mit Fall sensiti vity im DOM. Es ist "onclick", nicht "onClick".

+0

@ Asaph hat es nicht funktioniert 'el.onClick = function() {alert (el.id);};' –

+1

@chandru_cp: Das "c" in "onclick" nicht groß schreiben. Es ist ein Kleinbuchstabe "c". Siehe die letzte Zeile meiner Antwort. – Asaph

+0

@chandru_cp: Warum haben Sie diese Antwort nicht akzeptiert? – Asaph

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

Unter Ihrem Beispiel, ich glaube, Sie dies tun wollen:

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

Der einzige Trick zu erkennen, warum Sie Ihren displayDatePicker Anruf in dem function() { ... } Code wickeln müssen. Grundsätzlich müssen Sie der Eigenschaft onclick eine Funktion zuweisen, aber um dies zu tun, können Sie nicht einfach el.onclick = displayDatePicker(el.id) tun, da dies javascript angewiesen würde, die displayDatePicker-Funktion auszuführen und das Ergebnis dem onclick-Handler zuzuweisen, anstatt den Funktionsaufruf zuzuweisen selbst. Um dies zu umgehen, erstellen Sie eine anonyme Funktion, die wiederum Ihre displayDatePicker aufruft. Ich hoffe, das hilft.