Post
Ask Question
Abdul Basith

Abdul Basith

  • NA
  • 22
  • 8.1k

Click function is not working

Mar 10 2016 12:19 AM
In my project i'm drawing the design by using jQuery while runtime,
 
 
  1. $("#chkotherOwnPropY").click(function () {  
  2.                 
  3.                   var str = "";  
  4.                   str = str + '  <div class="col-md-10 col-md-offset-1 formGropup">' +  
  5.                   '<div class="col-md-5 labelDiv">' +  
  6.                   '<div class="eng">' +  
  7.                   '<label>If Yes Give the details</label>' +  
  8.                   '</div>' +  
  9.                   '</div>' +  
  10.                   '<div class="group col-md-7">' +  
  11.                   '</div>' +  
  12.                   '</div>' +  
  13.                       '<div class="col-md-10 col-md-offset-1 formGropup" style="margin-top: 2%">' +  
  14.                   '<div class="group col-md-4 address">' +  
  15.                   '<label>Property name</label>' +  
  16.                   '</div>' +  
  17.                   '<div class="group col-md-4 address">' +  
  18.                   '<label>Name of the owner</label>' +  
  19.                   '</div>' +  
  20.                   '<div class="group col-md-4 address">' +  
  21.                   '<label>Estimated Price (In Lakhs)</label>' +  
  22.                   '</div>' +  
  23.   
  24.                   '</div>' +  
  25.                   '<div class="col-md-10 col-md-offset-1 formGropup" style="margin: 3px 0 3px 0">' +  
  26.                   '<div class="group col-md-4 address">' +  
  27.                   '<input type="text" required id="txtPropName">' +  
  28.                   '<span class="highlight"></span>' +  
  29.                   '<span class="bar"></span>' +  
  30.                   '</div>' +  
  31.                   '<div class="group col-md-4 address">' +  
  32.                   '<input type="text" required id="txtOwnerName">' +  
  33.                   '<span class="highlight"></span>' +  
  34.                   '<span class="bar"></span>' +  
  35.                   '</div>' +  
  36.                   '<div class="group col-md-4 address">' +  
  37.                   '<input type="text" required id="txtEstPrime">' +  
  38.                   '<span class="highlight"></span>' +  
  39.                   '<span class="bar"></span>' +  
  40.                   '</div>' +  
  41.                   ' </div>' +  
  42.                   '<div class="col-md-10 col-md-offset-1 formGropup" style="margin-top: 0%">' +  
  43.                   '<div class="group col-md-4 address">' +  
  44.                   '<label>Survey number</label>' +  
  45.                   '</div>' +  
  46.                   '<div class="group col-md-4 address">' +  
  47.                   '<label>Re survey number</label>' +  
  48.                   '</div>' +  
  49.                   '<div class="group col-md-4 address">' +  
  50.                   '<label>Area</label>' +  
  51.                   '</div>' +  
  52.                   '</div>' +  
  53.                   '<div class="col-md-10 col-md-offset-1 formGropup" style="margin: 3px 0 3px 0">' +  
  54.                   '<div class="group col-md-4 address">' +  
  55.                   '<input type="text" required id="txtSurvNo">' +  
  56.                   '<span class="highlight"></span>' +  
  57.                   '<span class="bar"></span>' +  
  58.                   '</div>' +  
  59.                   '<div class="group col-md-4 address">' +  
  60.                   '<input type="text" required id="txtRESurvNo">' +  
  61.                   '<span class="highlight"></span>' +  
  62.                   '<span class="bar"></span>' +  
  63.                   '</div>' +  
  64.                   ' <div class="group col-md-4 address">' +  
  65.                   '<input type="text" required id="txtArea">' +  
  66.                   '<span class="highlight"></span>' +  
  67.                   '<span class="bar"></span>' +  
  68.                   '</div>' +  
  69.                   '</div>' +  
  70.                   '<div class="col-md-10 col-md-offset-1 formGropup" style="margin-top: 0%">' +  
  71.                   '<div class="group col-md-4 address">' +  
  72.                   ' <label>Village</label>' +  
  73.                   ' </div>' +  
  74.                   ' <div class="group col-md-4 address">' +  
  75.                   ' <label>Taluk</label>' +  
  76.                   '</div>' +  
  77.                   '<div class="group col-md-4 address">' +  
  78.                   ' <label>District</label>' +  
  79.                   '</div>' +  
  80.   
  81.                   '</div>' +  
  82.                   '<div class="col-md-10 col-md-offset-1 formGropup" style="margin: 3px 0 3px 0">' +  
  83.                   '<div class="group col-md-4 address">' +  
  84.                   '<input type="text" required id="txtVillage">' +  
  85.                   '<span class="highlight"></span>' +  
  86.                   '<span class="bar"></span>' +  
  87.                   '</div>' +  
  88.                   '<div class="group col-md-4 address">' +  
  89.                   '<input type="text" required id="txtTaluk">' +  
  90.                   '<span class="highlight"></span>' +  
  91.                   '<span class="bar"></span>' +  
  92.                   '</div>' +  
  93.                   '<div class="group col-md-4 address">' +  
  94.                   '<input type="text" required id="txtDistrict">' +  
  95.                   '<span class="highlight"></span>' +  
  96.                   '<span class="bar"></span>' +  
  97.                   '</div>' +  
  98.             
  99.                   ' <div class="col-md-10 col-md-offset-1 formGropup">' +  
  100.                    '<div class="group col-md-2 address">' +  
  101.                       ' <div class="col-md-2  addButton"><span id="AddDetails">+Add</span> </div>' +  
  102.                   ' </div>' +  
  103.                   '</div>'  
  104.               ' </div>';  
  105.              
  106.   
  107.                   $("#yesDetailsDiv").empty();  
  108.                   if ($("#yesDetailsDiv").is(':empty')) {  
  109.                       $('#yesDetailsDiv').append(str);  
  110.                   }  
  111.   
  112.                       });  
 
The above code works fine. An ADD button is introduced to add extra details if the user needs.
I need to display the same design if the user click add button, so i coded for this  
  1. $("#AddDetails").click(function () {  
  2.                         var str4 = "";  
  3.                         str4 = str4 +  
  4.                         '  <div class="col-md-10 col-md-offset-1 formGropup">' +  
  5.                                     '<div class="col-md-5 labelDiv">' +  
  6.                                     '<div class="eng">' +  
  7.   
  8.                                     '</div>' +  
  9.                                     '</div>' +  
  10.                                     '<div class="group col-md-7">' +  
  11.                                     '</div>' +  
  12.                                     '</div>' +  
  13.                                         '<div class="col-md-10 col-md-offset-1 formGropup" style="margin-top: 2%">' +  
  14.                                     '<div class="group col-md-4 address">' +  
  15.                                     '<label>Property name</label>' +  
  16.                                     '</div>' +  
  17.                                     '<div class="group col-md-4 address">' +  
  18.                                     '<label>Name of the owner</label>' +  
  19.                                     '</div>' +  
  20.                                     '<div class="group col-md-4 address">' +  
  21.                                     '<label>Estimated Price (In Lakhs)</label>' +  
  22.                                     '</div>' +  
  23.   
  24.                                     '</div>' +  
  25.                                     '<div class="col-md-10 col-md-offset-1 formGropup" style="margin: 3px 0 3px 0">' +  
  26.                                     '<div class="group col-md-4 address">' +  
  27.                                     '<input type="text" required id="txtPropName">' +  
  28.                                     '<span class="highlight"></span>' +  
  29.                                     '<span class="bar"></span>' +  
  30.                                     '</div>' +  
  31.                                     '<div class="group col-md-4 address">' +  
  32.                                     '<input type="text" required id="txtOwnerName">' +  
  33.                                     '<span class="highlight"></span>' +  
  34.                                     '<span class="bar"></span>' +  
  35.                                     '</div>' +  
  36.                                     '<div class="group col-md-4 address">' +  
  37.                                     '<input type="text" required id="txtEstPrime">' +  
  38.                                     '<span class="highlight"></span>' +  
  39.                                     '<span class="bar"></span>' +  
  40.                                     '</div>' +  
  41.                                     ' </div>' +  
  42.                                     '<div class="col-md-10 col-md-offset-1 formGropup" style="margin-top: 0%">' +  
  43.                                     '<div class="group col-md-4 address">' +  
  44.                                     '<label>Survey number</label>' +  
  45.                                     '</div>' +  
  46.                                     '<div class="group col-md-4 address">' +  
  47.                                     '<label>Re survey number</label>' +  
  48.                                     '</div>' +  
  49.                                     '<div class="group col-md-4 address">' +  
  50.                                     '<label>Area</label>' +  
  51.                                     '</div>' +  
  52.                                     '</div>' +  
  53.                                     '<div class="col-md-10 col-md-offset-1 formGropup" style="margin: 3px 0 3px 0">' +  
  54.                                     '<div class="group col-md-4 address">' +  
  55.                                     '<input type="text" required id="txtSurvNo">' +  
  56.                                     '<span class="highlight"></span>' +  
  57.                                     '<span class="bar"></span>' +  
  58.                                     '</div>' +  
  59.                                     '<div class="group col-md-4 address">' +  
  60.                                     '<input type="text" required id="txtRESurvNo">' +  
  61.                                     '<span class="highlight"></span>' +  
  62.                                     '<span class="bar"></span>' +  
  63.                                     '</div>' +  
  64.                                     ' <div class="group col-md-4 address">' +  
  65.                                     '<input type="text" required id="txtArea">' +  
  66.                                     '<span class="highlight"></span>' +  
  67.                                     '<span class="bar"></span>' +  
  68.                                     '</div>' +  
  69.                                     '</div>' +  
  70.                                     '<div class="col-md-10 col-md-offset-1 formGropup" style="margin-top: 0%">' +  
  71.                                     '<div class="group col-md-4 address">' +  
  72.                                     ' <label>Village</label>' +  
  73.                                     ' </div>' +  
  74.                                     ' <div class="group col-md-4 address">' +  
  75.                                     ' <label>Taluk</label>' +  
  76.                                     '</div>' +  
  77.                                     '<div class="group col-md-4 address">' +  
  78.                                     ' <label>District</label>' +  
  79.                                     '</div>' +  
  80.   
  81.                                     '</div>' +  
  82.                                     '<div class="col-md-10 col-md-offset-1 formGropup" style="margin: 3px 0 3px 0">' +  
  83.                                     '<div class="group col-md-4 address">' +  
  84.                                     '<input type="text" required id="txtVillage">' +  
  85.                                     '<span class="highlight"></span>' +  
  86.                                     '<span class="bar"></span>' +  
  87.                                     '</div>' +  
  88.                                     '<div class="group col-md-4 address">' +  
  89.                                     '<input type="text" required id="txtTaluk">' +  
  90.                                     '<span class="highlight"></span>' +  
  91.                                     '<span class="bar"></span>' +  
  92.                                     '</div>' +  
  93.                                     '<div class="group col-md-4 address">' +  
  94.                                     '<input type="text" required id="txtDistrict">' +  
  95.                                     '<span class="highlight"></span>' +  
  96.                                     '<span class="bar"></span>' +  
  97.                                     '</div>' +  
  98.                             '</div>';  
  99.   
  100.   
  101.                         $("#yesDetailsDiv").append(str4);  
  102.                     });  
     
 but here the click function is not working.   and i have tried 
  1. $('#AddDetails').live('click',function(){  
 and
  1. (document).on('click', '#AddDetails', function () {  
 
Why click function is not triggering here?
how can i solve this? 

Answers (5)