2013-04-08 2 views
0

Firefox를 통해 다음 코드를 실행하고 X 버튼을 클릭하면 javascript가 tmpField를 정의되지 않은 것으로 반환합니다. div 인 button의 parentNode를 얻어야합니다.this.parentNode는 Firefox를 사용하여 실행할 때 undefined를 반환합니다.

<head> 
    <title></title> 
    <script type ="text/javascript"> 
     function RemoveItem() { 
       if (document.addEventListener) { 
        var container = document.getElementById("InputContainer"); 
        var tmpField = this.parentNode; 
        alert("Field: " + tmpField);     
       } 
     } 
    </script> 
</head> 
<body> 
<table width="100%"> 
<tr> 
    <td style="width: 10%; vertical-align:top;">Field:</td> 
    <td id="InputContainer"> 
     <div id="divInput1" style="display: inline;"> 
      <input id="txtComment1" name="txtComment" type="text" maxlength="35" /> 
      <input id="btnDelete1" value="X" type="button" name="btnDelete" onclick="RemoveItem()" /> 
     </div> 
    </td> 
</tr> 
</table> 
</body> 
</html> 

제 시나리오에서는 "InputContainer"내에 여러 div를 동적으로 만듭니다. 각 div는 텍스트 상자와 삭제 버튼 (다음 증분을 포함하는 ID 포함)을 포함하는 동일한 구조를가집니다. 항상 div가 될 버튼의 parentNode를 반환 할 수 있어야합니다. IE에서는 작동하지만 Firefox에서는 작동하지 않는 코드가 있습니다. 어떤 아이디어를 해결하는 방법?

감사합니다 ...

+3

'this'는 당신이 생각하는 것과 다릅니다. – SLaks

+2

'this'를 매개 변수로 전달해야합니까? – adeneo

+0

코드를 디버깅하거나 간단히'this'를 경고하면 윈도우 객체임을 알 수 있습니다. –

답변

1

사용이 HTML :

<input id="btnDelete1" value="X" type="button" name="btnDelete" onclick="RemoveItem(this)" /> 

그리고 이것은 JS :

function RemoveItem(button) { 
    var container = document.getElementById("InputContainer"); 
    var tmpField = button.parentNode; 
    alert("Field: " + tmpField); 
} 

DEMO :http://jsfiddle.net/jwpds/1/

RemoveItem 함수 호출의 컨텍스트 너는 gl이다. obal이므로 thiswindow을 말합니다. 클릭 한 특정 요소를 가져 오려면 함수 호출에서 this을 전달한 다음 함수에서이 매개 변수로 액세스해야합니다.

그리고 내가 왜 document.addEventListener을 확인했는지 알 수는 없지만 내가하고있는 일과 함께 할 필요는 없다고 확신 할 수 있습니다.

관련 문제