2010-02-09 2 views
6

텍스트 상자가 포함 된 테이블 행이 있고 JavaScript 캘린더를 표시하는 onclick이 있습니다 ... 텍스트 상자가있는 테이블에 행을 추가하고 있지만 JavaScript 생성 된 텍스트 상자에 onclick 이벤트를 첨부하는 방법을 모르겠습니다. ...자바 스크립트에서 생성 된 텍스트 상자에 OnClick 이벤트를 첨부하는 방법은 무엇입니까?

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

그리고 내 자바 스크립트는 텍스트 상자를 생성하고,이 같이

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

나는 이벤트를 dinamically 연결하는 것은 크로스 브라우저가 아니므로 여러 브라우저에 대해 서로 다른 코드를 작성해야 할 수도 있습니다. 그 목적을 위해 JQuery와 같은 JS 라이브러리를 사용하는 것이 좋습니다. –

+1

@eyazici : OP가 사용하고있는 DOM 조작 전략은 안전합니다. (예를 들어, 'setAttribute()'는 예외입니다. {경고 (el.id);}; – Asaph

답변

14

:

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

은 BTW : 사례 sensiti에주의 DOM에있는 vity. 그것은 "onclick"이며, "onClick"이 아닙니다.

+0

는 아삽 @는'el.onClick =() 함수 작동 didnt는' –

+1

@chandru_cp는 "onclick을"의 "C"를 활용하지 마십시오. 소문자 "c"입니다. 내 답의 마지막 줄을보십시오. – Asaph

+0

@ chandru_cp : 왜이 ​​대답을 받아 들일 수 없습니까? – Asaph

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

귀하의 예제를 가지고 가서, 나는 당신이하고 싶은 생각 : 당신이 function() { ... } 코드에 displayDatePicker 전화를 포장해야하는 이유

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

유일한 트릭을 실현하는 것입니다. 기본적으로, 당신은 그러나 displayDatePicker 기능을 실행하고 함수 호출을 할당하는 것보다 onclick 핸들러에 결과를 오히려 할당하는 자바 스크립트를 말할 것이 작업을 수행하기 위해 당신은 그냥이 때문에 el.onclick = displayDatePicker(el.id) 할 수 없습니다에서 onclick 속성에 기능을 할당 할 필요가 그 자체. 따라서이 문제를 해결하려면 익명의 함수를 만들어 차례로 displayDatePicker이라고 부릅니다. 희망이 도움이됩니다.

관련 문제