2014-05-20 2 views
0

페이지를로드 할 때 Accordian 요소를 동적으로 표시하고 Accordian 요소를 클릭하면 동적으로 div id를 만들고 데이터를 추가하고 있습니다.ID가 동적으로 생성되는 div에 대한 클릭 이벤트를 등록하는 방법

내 요구 사항은 Accordian 내부의 div를 선택하면 해당 텍스트를 가져오고 싶습니다.

이렇게 등록하면 accordian을 선택한 경우에도 해고됩니다.

$('#div').click(function() 
    { 
     alert("click"); 
}); 

로드 시체에서 시도했지만 undefined가 지정되었습니다.

$("#"+selectedeleemnt+"").click(function() 
{ 

}); 

이 나의 완전한 프로그램

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" 
pageEncoding="ISO-8859-1" import="java.util.*, com.as400samplecode.util.*"%> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>jQuery Accordion</title> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> 


    <script type="text/javascript"> 
var xmldocu = '<categories><category id="2" name="Pepsi" ><products><product id="858" name="7UP" price="24.4900" /><product id="860" name="Aquafina" price="24.4900" /></products></category><category id="4" name="Coke" ><products><product id="811" name="ThumpsUp" price="24.4900" /><product id="813" name="Maaza" price="24.4900" /></products></category></categories>' ; 
      $(document).ready(
      function() { 
       $("#accordion").accordion({ header: "h3",   
        autoheight: false, 
        active: false, 
        alwaysOpen: false, 
        fillspace: false, 
        collapsible: true, 
       }); 

$("#accordion").accordion({ 
activate: function(event, ui) { 
var selectedeleemnt = ui.newHeader.text(); 
if(selectedeleemnt=="CoolDrinks") 
{ 
$(xmldocu).find("category").each(function() { 
var categories = $(this).attr('name'); 
    var str= ''; 
var UL = $("<ul></ul>"); 
str += '<li>' + categories + '</li>'; 
UL.append(str); 
$("#"+selectedeleemnt+"").append(UL); 

}); 
} 
} 
}); 


}); 


    </script> 

</head> 
<body> 

    <div style="width: 468px;"> 
     <div id="accordion"> 
<% 
     ArrayList<String> list = new ArrayList<String>(); 
     list.add("CoolDrinks"); 
     list.add("Snacks"); 
     list.add("Other"); 
     %> 

<% 
     for(String item : list) 
     { 
      %> 
      <h3><a href="#"><%=item%></a></h3> 
      <div> 
       <h4 id="<%=item%>"></h4> 
      </div> 
     <% 
     } 
     %> 
     <% 
     %> 

    </div> 
    </div> 

</body> 
</html> 
+0

당신이 그것을로드 시도() CSTE 연구진 사용해보십시오입니까? – LefterisL

+1

클래스 선택기 작성 및 작성시 div를 클래스에 추가하고 이벤트에서 idof를 클릭하십시오. –

+0

http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements –

답변

2

가 동적으로 생성 된 후

$("#accordion").on("click", "h4", function() { 
    alert($(this).text()); 
}); 
+1

감사합니다. 완벽하게. – Pawan

관련 문제