목록의 배경 이미지에서 jQuery 클릭 이벤트를 트리거 할 수 있습니까?

Question

나는 간결 단축 항목의 정렬되지 않은 목록 같은 것을 가지고 : I가 스타일리스트가

<div id="elementsContainer"> 
    <ul> 
    <li><a>One</a></li> 
    <li><a>Two</a></li> 
    </ul> 
</div> 

을하지만,이 3 개 스타일은 목록 항목에 대한 배경 이미지 처리 :

#elementsContainer ul li { 
    list-style:none; 
} 
#elementsContainer a { 
    background: transparent url(/images/icons/bullet_delete.png) no-repeat 5px 50%; 
} 

#elementsContainer a:hover, 
#elementsContainer a:focus, 
#elementsContainer a:active { 
    background:#fff url(/images/icons/delete.png) no-repeat 5px 50%; 
} 

목록이 멋지다 - 각 목록 항목의 텍스트 왼쪽에 작은 삭제 아이콘이 표시됩니다. 그러나 각 항목의 클릭 이벤트를 처리하는 데 jQuery (1.3)를 사용하려고합니다. 목록 항목의 배경 이미지와 목록 항목의 텍스트간에 별도의 기능을 원합니다. 이미지를 클릭하면 항목을 삭제하고 싶습니다. 텍스트를 클릭하면 해당 항목을 편집하고 싶습니다.

나는 같은 것을 사용하기 시작 :

$("a").live("click", function(event){ 
    alert($(this).text()); 
}); 

을하지만 $ (이) 나 나는 텍스트 또는 이미지를 클릭하고 만약 내가 결정할 수있다 "이벤트"에 아무것도 표시되지 않습니다.

예, 저는 별도의 "img"태그를 사용하여 별도로 클릭을 처리 할 수 ​​있음을 알고 있습니다. 그것이 유일한 옵션이라면 나는 그 길로 갈 것이다. 배경 이미지에서 작동하도록하는 방법이 있는지 알고 싶습니다.

미리 감사드립니다.

Answer 1

IMG 태그로 이동하십시오. 귀하가 할 수있는 최선의 방법은 LI 요소 자체에 대한 클릭을 감지하여 지저분해질 수있는 방법입니다. IMG 태그 (심지어 의미 론적으로 좋고 멋지게 페이지를 감싸는 A 태그도)가 가장 잘 작동합니다.

LI 내에서 IMG를 사용하여 동일하게 보이도록 스타일링 할 때 많은 문제가 발생하지 않아야합니다. 삭제/수정 아이콘이 필요한 목록 내에서 항상 유사한 작업을 수행합니다.

Answer 2

DOM에 관한 한 실제로 배경이 아니기 때문에 배경 이미지 클릭을 구분할 수 없습니다. 당신이 가지고있는 것은 a 요소 자체 (배경 이미지와 함께 나타납니다)이며, onclick 처리기는 태그, 텍스트 안의 아무 곳이나 클릭하는 동안 실행됩니다.

img 태그 (또는 다른 별도의 태그)를 사용하고 기사 작성시 결론에 따라 클릭을 별도로 처리하는 것이 가장 좋습니다.

Answer 3

원하는 효과를 내기 위해 수행 할 수있는 작업은 삭제 이미지가 표시 될 영역에 일부 공백이있는 범위를 넣은 다음 해당 범위의 클릭에 이벤트를 연결하는 것입니다.

Answer 4

요소를 덮어 씌우고 이벤트를 등록하십시오.