How to toggle some info while creating divs dynamically?

Question

I want to toggle divs that am dynamically creating when a person clicks on add but it isn't toggling but the divs are being created. Please help.Here's my code

var i = 1;

function addShoe() {
  i++;
  var div = document.createElement('div');
  div.innerHTML = '<input type="button" id="add_Shoe" onClick="addShoe()" value="Add"/><input type="text" name="shoe[shoeCode[]]" size="5"><input type="text" name="shoe[shoeName[]]" size="10"><a href="#" class="trigger" style="float:right">Details</a><input style="float:right;" type="button" value="Delete" onClick="removeShoe(this)"><div class="ShoeSize" style="margin-left:260px"><input type="text" name="shoe[shoeSize[[]]]" size="7"style="margin-left=140px"><input type="text" name="shoe[shoeQuantity[[]]]" size="7"><input type="text" name="shoe[shoePrice[]]" size="7"><input type="text" name="shoe[totalCost[]]" size="7"></div>';
  document.getElementById('kids').appendChild(div);
}

function removeShoe(div) {
  document.getElementById('kids').removeChild(div.parentNode);
  i--;
}
$(document).ready(function() {
  $(".trigger").click(function() {
    $(this).next(".ShoeSize").toggle();
  });
});

<form method="post" ng-app="">

  <table width="45%">
    <tr>
      <td style="width:50px;padding-left:30px">Shoe Code</td>
      <td style="width:70px">Shoe Name</td>
      <td style="width:30px;padding-left:5px">Different size</td>
      <td style="width:50px">Shoe Size</td>
      <td style="width:50px">Shoe Quantity</td>
      <td style="width:50px">Shoe Price</td>
      <td style="width:50px">Total Cost</td>
    </tr>
    <table>
      <div id="kids" style="width:60%">
        <input type="button" id="add_Shoe" onClick="addShoe()" value="Add" />
        <input type="text" name="shoe[shoeCode[]]" size="5">
        <input type="text" name="shoe[shoeName[]]" size="10"><a href="#" class="trigger" style="float:right">Details</a>
        <input style="float:right;" type="button" value="Delete" onClick="removeShoe(this)">
        <div class="ShoeSize" style="margin-left:260px">
          <input type="text" name="shoe[shoeSize[[]]]" size="7" style="margin-left=140px">
          <input type="text" name="shoe[shoeQuantity[[]]]" size="7">
          <input type="text" name="shoe[shoePrice[]]" size="7">
          <input type="text" name="shoe[totalCost[]]" size="7">
        </div>
      </div>
      </div>

`

score 0 · Answer 1 · edited May 23 '17 at 12:31

0

You cannot use $(".trigger").click(function(){ for dynamically created elements. Look at this post here:

Access dynamically created items using jQuery?

The very first answer is what you need

edited May 23 '17 at 12:31

Community

1
1

answered Mar 20 '16 at 14:38

theblindprophet

7,767
5
37
55

Please create a jsfiddle and I could diagnose the issue quicker. – theblindprophet Mar 20 '16 at 14:56
You did not include JQuery into your page – theblindprophet Mar 20 '16 at 15:16
Okay am not sure whats wrong with the fiddle cause its showing nothing – JoshMaina Mar 20 '16 at 15:24
I would go and work on this a little more then edit your question – theblindprophet Mar 20 '16 at 15:30

How to toggle some info while creating divs dynamically?

1 Answers1