최근에 나는 프로젝트 작업을 할 때 Jquery를 사용했습니다. 나는 몇 가지 "이상한" 문제에 직면했습니다. (마스터님, 저를 비난하지 마세요.)
ClassYuan의 블로그 http://www.classyuan.com/에 감사드립니다.
1. HTML 요소가 포함된 이벤트를 로딩하면 로딩과 동시에 이벤트가 실행됩니다.
오류 코드:
소스 보기
PRint?1 $("#btnLoad").bind("click",GetProduct());
올바른 코드
소스 보기
print?1 $("#btnLoad").bind("click", function() { GetProduct() });
이 코드에서는 Bind 메서드를 무시했습니다. API 설명은 바인딩(type,[data],fn)입니다.
fn을 단순한 함수로 잘못 간주했기 때문에 이 코드는 로드할 때 fn을 한 번 실행합니다.
이것은 글쓰기 형식의 실수입니다. 이유를 아는 사람이 나에게 조언을 해줄 수 있기를 바랍니다.
2. 변수 범위의 문제 (jquery의 문제는 아닌 것 같습니다. js와 .net의 차이입니다..)
소스 보기
print?1 함수 텍스트() {
2 for (var i = 0; i < 3; i++) {
3 $("<a>삭제</a>").attr({ id: "hr_" + i, href: "javascript:;" }).addClass("btnCSS").bind("click", function () { tes(i) }).appendTo(".div_list");
4}
5}
6 함수 tes(id) {
7 경고(ID);
8}
해당 id를 알려주고 싶은 함수입니다. 결과적으로는 <a> 태그가 3개나 뜨는 함수입니다.
보니까...이해가 되네요
변수 범위의 문제에 대해 tes 함수에 전달된 매개 변수는 루프가 끝난 후 i의 값이므로 모두 3입니다.
이것은 .net과 다른 것 같습니다.
마지막으로 해결책은 - -.. $(this)를 전달하세요.
3. 이벤트 실행 순서의 문제
소스 보기
print?1 <a target="_blank" title="Iphone" >
2 <img id="proImg7_2" src="" alt="Iphone" style="width:70px; height:60px; border:none;"
3 </a>
onclick 이벤트는 이 이미지에 바인딩됩니다. 이벤트의 내용은 <img> 태그의 상위 항목에 href 속성을 추가하는 것입니다.
그러나 이벤트가 실행된 후에는 a 태그의 링크로 직접 이동합니다. 분석 후.
href 이전에 클릭이 실행되어야 합니다. 즉, 이미지를 클릭했을 때 A 태그에 이미 href가 있고 동시에 A 태그가 실행되어야 합니다.
해결책.. <img>의 외부 태그를 제거하고.. 그런 다음 이벤트를 수정합니다.
소스 보기
print?1 idwrap(' <a href=" http://www.QQ.com"></a>' );
위 내용은 제가 jquery를 처음 사용하면서 겪게 되는 문제들입니다. 여기에 남겨두고 성장의 과정으로 다루겠습니다..