Question

我有一个按钮Add row。点击按钮将添加一个新行。

如果单击原始的第1行或第2行的X标记，则显示警告框。

但是，如果单击新添加的行的X标记，则不会显示警告框。这很奇怪，因为新添加的行的html与原始行类似。

＆＃13;

< script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" > < /script>
<script>
$(document).ready(function(){
	$("#btn1").click(function(){
  	 index = Math.floor(Math.random() * 10000) + 1;
     jQuery(".fes-variations-list-multiple").append('<tr class="fes-single-variation">'
                                                    +    '<td class="fes-name-row">'
                                                    +        '<input class="fes-name-value" name="option['+(index)+'][description]" id="option['+(index)+'][description]" rows="3" value="'
                                                    + index
                                                    + '" type="text">'
                                                    +    '</td > '
                                                    +    ' < td class = "fes-price-row" > '
                                                    +        ' < input class = "fes-price-value"
name = "option['+(index)+'][price]"
id = "option['+(index)+'][price]"
value = "0"
type = "text" > '
                                                    +    ' < /td>'
                                                    +    '<td class="fes-delete-row">'
                                                    +        '<a href="#" class="edd-fes-delete">'
                                                    +            '×'
                                                    +        '</a > '
                                                    +    ' < /td>'
                                                    +'</tr > ');
    
  });
  jQuery('.fes - delete - row ').click(function(){
  	alert("X is clicked");
  
  });
  
  
  
  
  
  
  
  
});
    
</script>

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>

<body>
  <button id="btn1">Add row</button>
  <div class="fes-fields">
    <table class="multiple">
      <thead>
        <tr>
          <th class="fes-name-column">Chủng loại hàng hóa</th>
          <th class="fes-price-column">Số tiền ( VND)</th>
          <th class="fes-remove-column">&nbsp;</th>
        </tr>
      </thead>
      <tbody class="fes-variations-list-multiple">




        <tr class="add_new" style="display:none !important;" id="multiple"></tr>
        <tr class="fes-single-variation">
          <td class="fes-name-row">
            <input class="fes-name-value" name="option[3041][description]" id="option[3041][description]" rows="3" value="Đồ chơi ô tô" type="text">
          </td>
          <td class="fes-price-row">
            <input class="fes-price-value" name="option[3041][price]" id="option[3041][price]" value="0" type="text">
          </td>
          <td class="fes-delete-row"><a href="#" class="edd-fes-delete">×</a>
          </td>
        </tr>
        <tr class="fes-single-variation">
          <td class="fes-name-row">
            <input class="fes-name-value" name="option[5053][description]" id="option[5053][description]" rows="3" value="Đồng hồ đeo tay" type="text">
          </td>
          <td class="fes-price-row">
            <input class="fes-price-value" name="option[5053][price]" id="option[5053][price]" value="0" type="text">
          </td>
          <td class="fes-delete-row"><a href="#" class="edd-fes-delete">×</a>
          </td>
        </tr>
      </tbody>

    </table>
  </div>
</body>

＆＃13;

Answer 1

您必须使用jQuery on来注册您的点击事件。 jQuery on将适用于当前和未来的元素（动态注入DOM）。

$(document).on("click",".fes-delete-row",function(e){

    e.preventDefault();
    alert("X is clicked");

});

未单击按钮

1 个答案: