Question

我正在构建一个工具，我在其中插入了一些动态输入字段以接受用户输入。我从代码中克隆了一些div，以制作不同的部分。我的div已成功克隆，但是即使我单击子div事件，也始终会触发父div附带的事件。

我已设置$("#main").clone(true).insertAfter("#main");来更改其默认布尔值以触发事件。我不知道该怎么做才能使其在每个克隆的div而不是父div上起作用。

这是我的输入表格

<form name="add_name" id="add_name">  
        <div class="table-responsive">  
              <table class="table table-bordered" id="dynamic_field">  
                      <tr>  
                             <td><input class="typeahead form-control" type="text" placeholder="Enter Description"></td>
                             <td> <?php echo form_dropdown('id',$unit_name, '', 'class="form-control"');?> </td>
                             <td> <input type="quantity" class="form-control" id="quantity" placeholder="Enter Quantity"></td>
                             <td><input type="price" class="form-control" id="price" placeholder="Enter Rate"></td>
                             <td><label for="total" >Price:</label>
                             <td> <a href="#"> <span class="glyphicon glyphicon-plus" name="add" id="add"></span></td>
                      </tr> 
               </table>  
               <input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" />  
         </div>  
</form>

这是我的javascript函数：

这是克隆div和相关事件

<script>
    $("#btnAdd").click(function() {
         $("#main").clone(true).insertAfter("#main");
    });
</script>

这是生成动态输入字段并被克隆的功能

$(document).ready(function(){  
      var i=1;  
      $('#add').click(function(){  
           i++;  
           $('#dynamic_field').append('<tr id="row'+i+'"> <td><input class="typeahead form-control" type="text" placeholder="Enter Description"></td>\n\
  <td> <input type="quantity" class="form-control" id="quantity" placeholder="Enter Quantity"></td>\n\
  \n\
<td><input type="price" class="form-control" id="price" placeholder="Enter Rate"></td>\n\
 <td><label for="total" >Price:</label>\n\
<td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');  
      });
});

Answer 1

您正在克隆ID为#main。从文档中，

使用.clone（）具有产生具有重复id属性的元素的副作用，这些id属性应该是唯一的。建议尽可能避免克隆具有此属性的元素或改为使用类属性作为标识符。

这就是为什么它总是在第一个div上触发的原因。因此，请从新创建的div中删除id元素，然后尝试使用class。

另一种方法是，您可以克隆$("#main").clone()并将onclick事件用于动态元素，而不是click事件。

克隆的jquery元素正在触发事件到父<div>而不是子<div>？

1 个答案: