Question

我想切换当人们点击添加时动态创建的div，但它不是切换但是正在创建div。请帮忙。这是我的代码

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>

`

Answer 1

您不能将$(".trigger").click(function(){用于动态创建的元素。看这篇文章：

Access dynamically created items using jQuery?

第一个答案是你需要的

如何在动态创建div时切换一些信息？

1 个答案: