728x90 반응형 JavaScript, jQuery, Java51 동적 생성 element 이벤트 바인딩 .on() DB에서 받아온 데이터를 이용하여 나, 등의 태그를 동적으로 추가할 경우, 123$("#fsch_lst li").click(function(){ alert($(this).attr("id"));});Colored by Color Scriptercs 이와같은 일반적인 이벤트가 동작되지 않는다. 기존에 작성된 태그에는 click 이벤트가 적용 되지만,for문이나 ajax로 추가되는 element에는 click 이벤트가 적용되지 않는다. 아래 소스코드로 바꾸어 실행해야한다. 123$("#fsch_lst").on("click","li", function(e){ alert($(this).attr("id"));});Colored by Color Scriptercs document 선택자 사용가능. 123$(docum.. 2017. 12. 20. 체크박스 상위 노드 찾기(2) - 중복체크 방지, 전체 선택, 전체 해제 체크박스 상위 노드 찾기(1)에서 만든 아래의 체크박스 트리에서A, B, C 그룹 하나만 체크하고, 각 그룹마다 하나만 체크되게 해야할때 1234567891011$(".TreePd input[name='chk_tree']").click(function(){ var chkid = $(this).parents(".Tree_sTx").attr('value'); if($(this).is(":checked") == true){ $("input[type=checkbox]").prop("checked",false); $(this).prop("checked",true); $("[value = '"+chkid+"']").prop('checked', true); }else $("input[type=checkbox]").p.. 2017. 12. 20. 체크박스 상위 노드 찾기(1) 12345678910111213141516171819202122 ${att.g2_NAME } ${a.g2_NAME } Colored by Color Scriptercs 위 소스 구조를 그림으로 나타내면 다음과 같다. JSTL 을 이용하여 DB에서 조회된 값으로 체크박스 트리를 만들었다.Jquery 로 체크박스를 제어하기 위해 상위 노드들을 찾는다. $("input[name='chk_tree']").click(function(){ - this.value , $(this).val() : 선택한 Tree_sTx 의 체크박스 value 값 - this.checked , $(this).is(":checked") : 선택한 체크박스의 체크 여부 - $(this).parents(".treebx").attr('valu.. 2017. 12. 20. 노드 다루기! (부모/형제/자식 노드 찾기, 노드 생성/추가/이동/삭제) 1. 노드 찾기 - 태그 이름으로 노드 찾기 : $("태그이름"), $("선택자") - 클래스 이름으로 노드 찾기 : $(".클래스이름") - ID로 노드 찾기 : $("선택자") - 속성으로 노드 찾기 : $("[속성이름=값]") - 찾은 요소 개수 구하기 : .size() , .length - 찾은 요소 n번째 접근하기 : .eq(index) , .each(function(index){}); - 찾은 요소에서 특정요소만을 걸러내기 : .filter("선택자") - 찾은 요소에서 특정 자식요소만 찾기 : .find("선택자") 2. 자식 노드 찾기 - 전체 자식 노드 찾기 -- 텍스트 노드 포함 전체 자식 노드 찾기 : $("선택자").contents() -- 텍스트 노드 제외한 전체 자식 노드 찾기 .. 2017. 12. 19. 이전 1 ··· 8 9 10 11 12 13 다음 728x90 반응형
