如何在li标签内使用jQuery使div可点击

Question

I have ul-->li that are generating dynamically in jQuery, further each li tag has div with class ".summary_block" and id. all this happening at run time. page can have as div under li tag with similar structure....

  <div class="property">
    <ul class="properties_Ul">

      //record 1
      <li class="property_detail">
        <div class="summary_block" id="DEMO1_000018">
        </div>
      </li>

      //record 2
      <li class="property_detail">
        <div class="summary_block" id="DEMO1_000024">
        </div>
     </li>
            ........... //record n-x
   </ul>
 </div>

my issue is i want individual div in each li handle click event.... and for some reason i am doing correct way...

jQuery code that is generating record blocks

 $(".property").append("<ul></ul>");
 $(".property ul").addClass("properties_Ul");

  for (var val in plugin_Global_Variables.x_propcode) {

    $("<li></li>").addClass('property_detail').html("<div class='summary_block' id='" + plugin_Global_Variables.R_FilteredProperties[val].r_propcode + "</div>").appendTo(".property ul");

 }

and in HTML under document.ready function...

   $(".summary_block").on("click", "li", function () {

       alert("block ID "+ $(this).attr("id"));
    });

Answer 1

.summary_block is itself the li and that too added dynamically

You need to bind event to an static element like .property

 $(".property").on("click", ".summary_block", function () {
      alert("block ID "+ $(this).attr("id"));
 });