How to register click event on div's whose id's are generated dynamically

Question

On loading of the page , i am showing a Accordian dynamically , and on click of the Accordian elements , i am creating div id dynamically and appending data to them .

My requirement is that , When the div inside the Accordian is selected , i want to get that selected text .

If i register this way , its getting fired up even when accordian is selected .

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

I also tried but on body on load its giving undefined .

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

});

This is my complete program

<%@ 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>

add a class to div on creating and write class selector and get idof click div in event — Ehsan Sajjad, May 20 '14 at 16:15
http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — random_user_name, May 20 '14 at 16:19

score 2 · Accepted Answer · answered May 20 '14 at 16:18

2

Try using .on()

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

answered May 20 '14 at 16:18

Mark Robson

1,111
2
13
34

How to register click event on div's whose id's are generated dynamically

1 Answers1