Question

我在点击上一个div中的图标时添加了一个新的div。但是当点击新生成的div上的图标时，它无法正常工作。请帮忙。

JSP：

<div class="amount">
    <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
    <div class="form-group label-floating">
        <label class="control-label">Amount</label>
        <input type="text" class="form-control">
    </div>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
    <div class="form-group label-floating float-label-control" id="select-field">
        <div class="float-label-control">
            <label class="control-label">Currency
                <small>(required)</small>
            </label>
        </div>
        <select class="form-control dropdown" id="country-list">
            <option value="1">AED</option>
            <option value="2">BND</option>
            <option value="3">INR</option>
            <option value="4">OMR</option>
            <option value="5">QAR</option>
            <option value="6">SAR</option>
            <option value="7">SGD</option>
            <option value="8">TWD</option>
            <option value="9">USD</option>
        </select>           
    </div>      
</div>
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
    <i class="material-icons"id="addicon">add</i>
</div>

Jquery的

 $("#addicon").click(function () {
     alert("add");
     $(".tab-pane").append('<div class="row"><div class="purpose"><div class="amount"><div class="col-lg-3 col-md-3 col-sm-12 col-xs-12"><div class="form-group label-floating"><label class="control-label">Amount</label><input type="text" class="form-control"></div></div><div class="col-lg-3 col-md-3 col-sm-12 col-xs-12"><div class="form-group label-floating float-label-control" id="select-field"><div class="float-label-control"><label class="control-label">Currency<small>(required)</small></label></div><select class="form-control dropdown" id="country-list"><option value="1">AED</option><option value="2">BND</option><option value="3">INR</option><option value="4">OMR</option><option value="5">QAR</option><option value="6">SAR</option><option value="7">SGD</option><option value="8">TWD</option><option value="9">USD</option></select></div></div><div class="col-lg-3 col-md-3 col-sm-12 col-xs-12"><i class="material-icons"id="deleteicon">clear</i><i class="material-icons"id="addicon">add</i></div></div>');
 });

请帮我解决。

Answer 1

首先，在添加导致重复ID的元素时，ID应始终是唯一的。

其次，如果您将id更改为class，则使用$(document).on('click','.addicon',function() {})

<强>演示

＆＃13;

$(document).on("click", ".addicon", function() {
  $(".tab-pane").append('<div class="row"><div class="purpose"><div class="amount"><div class="col-lg-3 col-md-3 col-sm-12 col-xs-12"><div class="form-group label-floating"><label class="control-label">Amount</label><input type="text" class="form-control"></div></div><div class="col-lg-3 col-md-3 col-sm-12 col-xs-12"><div class="form-group label-floating float-label-control" id="select-field"><div class="float-label-control"><label class="control-label">Currency<small>(required)</small></label></div><select class="form-control dropdown" id="country-list"><option value="1">AED</option><option value="2">BND</option><option value="3">INR</option><option value="4">OMR</option><option value="5">QAR</option><option value="6">SAR</option><option value="7">SGD</option><option value="8">TWD</option><option value="9">USD</option></select></div></div><div class="col-lg-3 col-md-3 col-sm-12 col-xs-12"><i class="material-icons"id="deleteicon">clear</i><i class="material-icons addicon">add</i></div></div>');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab-pane">
  <div class="row">
    <div class="amount">
      <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
        <div class="form-group label-floating">
          <label class="control-label">Amount</label>
          <input type="text" class="form-control">
        </div>
      </div>
      <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
        <div class="form-group label-floating float-label-control" id="select-field">
          <div class="float-label-control">
            <label class="control-label">Currency
                <small>(required)</small>
            </label>
          </div>
          <select class="form-control dropdown" id="country-list">
            <option value="1">AED</option>
            <option value="2">BND</option>
            <option value="3">INR</option>
            <option value="4">OMR</option>
            <option value="5">QAR</option>
            <option value="6">SAR</option>
            <option value="7">SGD</option>
            <option value="8">TWD</option>
            <option value="9">USD</option>
        </select>

        </div>

      </div>
      <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
        <i class="material-icons addicon">add</i>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 2

您只能使用每页一个id使用类或使用onclick属性使用以下代码

function addRow() {
    alert("add");
    $(".tab-pane").append('<div class="row"><div class="purpose"><div class="amount"><div class="col-lg-3 col-md-3 col-sm-12 col-xs-12"><div class="form-group label-floating"><label class="control-label">Amount</label><input type="text" class="form-control"></div></div><div class="col-lg-3 col-md-3 col-sm-12 col-xs-12"><div class="form-group label-floating float-label-control" id="select-field"><div class="float-label-control"><label class="control-label">Currency<small>(required)</small></label></div><select class="form-control dropdown" id="country-list"><option value="1">AED</option><option value="2">BND</option><option value="3">INR</option><option value="4">OMR</option><option value="5">QAR</option><option value="6">SAR</option><option value="7">SGD</option><option value="8">TWD</option><option value="9">USD</option></select></div></div><div class="col-lg-3 col-md-3 col-sm-12 col-xs-12"><i class="material-icons"id="deleteicon">clear</i><i onclick="addRow()" class="material-icons"id="">add</i></div></div>');
}

单击不适用于新生成的行

2 个答案: