Jquery 및 클릭 이벤트

다음 코드를 사용하면 요소가 페이지에 추가되지만 비정상적으로 click 이벤트는 발생하지 않습니다. 어떤 아이디어?Jquery 및 클릭 이벤트

function ToggleData(e){ 
var parentRow = $(this).parent().parent(); 
var rowData = $(':nth-child(2)',parentRow); 
var html = $("<input type='text' id='amendedval' value='" + $.trim(rowData.text()) +"'/>"); 
//Add the update tick 
var imgTick = $("<img src='../images/tick.png' id='imgTick'/>"); 
rowData.text(''); 
rowData.append(html); 
rowData.append(imgTick); 
imgTick.click(updateTickClick); 
}; 

function updateTickClick(e) 
{ 
alert('hi'); 
};

감사합니다.

출처

2009-07-02 RubbleFord

클릭 되었습니까? –

FireBug를 사용하여 rowData 및 parentRow에 실제로 DOM 객체가 포함되어 있는지 확인할 수 있습니까? (선택자가 0 요소를 반환했을 수도 있음) –

img가 올바른 데이터와 함께 페이지에 추가되고 있습니다. – RubbleFord

변경됨 var rowData = $ (': nth-child (2)', parentRow); ~ var rowData = $ ('td : nth-child (2)', parentRow);

이제 클릭 이벤트가 올바르게 발생합니다.

출처

2009-07-02 14:12:49 RubbleFord

당신은 내가 innerHTML을의 내장 실제 DOM 참조보다는 무언가를 필요로 할 수 이벤트 핸들러의 추가를 생각하고

$("imgTick").onclick = updateTickClick;

를 시도 할 수 있습니다. 여기 Firefox 3.5 및 IE7 모두 나를 위해 작동 내 간단한 예이다 - 문제가 parentRow 및 rowData 하행의 당신의 선택에 같은

--edit

보인다. 유일한 변화는, rowData가 선택하는 방법입니다

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <title>Testing onclick</title> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    <script type="text/javascript"> 
    function ToggleData(e){ 
     var rowData = $('td'); 
     var html = $("<input type='text' id='amendedval' value='" + $.trim(rowData.text()) +"'/>"); 
     //Add the update tick 
     var imgTick = $("<img src='tick.png' id='imgTick'/>"); 
     rowData.text(''); 
     rowData.append(html); 
     rowData.append(imgTick); 
     imgTick.click(updateTickClick); 
    }; 
    function updateTickClick(e) { 
     alert('hi'); 
    }; 
    </script> 
</head> 
<body> 
    <table> 
     <tr> 
      <td><a href="#" onclick="ToggleData(this); return false;">Click me</a></td> 
     </tr> 
    </table> 
</body> 
</html>

출처

2009-07-02 13:20:45 robertc

여전히 동일한 문제가 발생하지 않습니다. – RubbleFord

그는 jQuery의 클릭 이벤트 바인더 (onclick DOM 대신)를 사용하고 있습니다. imgTick은 rowdata에 추가되므로 DOM의 일부 여야합니다. –

imgTick 주위에 따옴표가 없으면 어떨까요? Firebug (http://getfirebug.com)를 확인해보십시오. 디버거는 이와 같은 버그를 제거하는 데 정말 유용합니다. –

imgTick.bind("click", function(){ 
alert ("Clicked"); 
});

출처

2009-07-02 13:22:21 rahul

그것은

출처

2009-07-02 13:22:43 dhaval

왜 필요합니까 *? 나는 함수 참조를 전달하는 것이 완벽하다고 생각한다. –

익명 함수가 필요하지 않습니다. 함수 참조는 완전히 합법적입니다. –

Tony가 지적한대로 라이브가 없으면 시작시 발사가 알려지지 않은 이벤트를 등록하려면 함수 콜백이 필요합니다.필요가 변경 될 수 있습니다 – dhaval

당신이 여기에 세드릭 볼 VS에서 디버깅을 시도해 봤어 또는 익명 함수없이 등록 된 콜백이 될 수 있습니다. 여기에 제공된 정보는 무엇이든 추론하기에는 불완전한 것으로 보입니다. id가 imgTick 인 div의 경우 클릭 이벤트에 대해 jQuery에서이 작업을 수행합니다.

$('#imgTick').click(function({ 

alert('Hi');

});

출처

2009-07-02 13:24:40 theraneman

나는 imgTick 변수를 가져 오는 데 사용되는 선택기가 잘못된 것 같아요? 그냥 $ ('# imgTick')하지 않아야합니다. – theraneman

귀하의 imgTick이 페이지에 동적으로 추가되고 있습니다. 대신) (.click 사용하는, .live 사용해보십시오 : dhaval 말한, 아니, 반대

imgTick.live("click", updateTickClick);

, 그것은 하지 익명으로 가지고있다.

출처

2009-07-02 13:25:31

그것이 내가 생각할 것이지만 내가 점검 할 것이라고 생각했습니다. – RubbleFord

그는 요소가 페이지에 추가 된 후 클릭을 바인딩합니다. –

Jquery 및 클릭 이벤트

답변

관련 문제