Question

当我点击下面的“添加”时，我希望输入元素显示为父元素。它工作正常但所有子元素都执行而不是一个。此外，如果我点击他们执行的身体中的任何位置，我不想要。

var selector = Windows.Devices.Bluetooth.BluetoothDevice.getDeviceSelector();
Windows.Devices.Enumeration.DeviceInformation.findAllAsync(selector, null).done(function (data) {
    for (var i = 0; i < data.length; i++) {
        //My code here
    }
});

Windows.Devices.Bluetooth.BluetoothDevice.fromBluetoothAddressAsync(devid).done(
function(devinfo) {
    res = devinfo;
})
Windows.Devices.Bluetooth.BluetoothDevice.fromIdAsync(data.id).done(function(result){
    //my code here
});
Windows.Devices.Bluetooth.Rfcomm.RfcommDeviceService.fromIdAsync(devId).done(function (result) {    
    //my code here
})

Answer 1

这里有几个问题。首先，每次添加新内容时，您都会重复id个属性。将这些更改为类。然后在事件处理程序中使用this关键字来引用引发事件的元素，以便您只附加到该单个实例。最后，在事件上添加对stopPropagation()的调用以停止事件冒泡，以便嵌套的div元素不会引发多个事件，而这些事件又会附加多个div。试试这个：

$(document).ready(function() {
  $(".add_field_button").click(function(e) {
    e.preventDefault();
    $("#maingroup_1").append('<div class="Subgroupmain">Add 1<input type="text"></div>');
    return false;
  });

  $(document).on("click", ".Subgroupmain", function(e) {
    e.stopPropagation();
    $(this).append('<div class="SubSubgroupmain" style="margin: 0 0 0 23px;">Add 2<input type="text"></div>');
  });
  
  $(document).on("click", ".SubSubgroupmain", function(e) {
    e.stopPropagation();
    $(this).append('<div class="Sub3groupmain" style="margin: 0 0 0 53px;">Add 3<input type="text"></div>');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
  <div id="maingroup">
    <div id="maingroup_1">
      <span class="add_field_button">Add </span>
      <input type="text">
    </div>
  </div>
</div>

Answer 2

您使用的是重复ID，但这里的实际问题是您要附加一般ID而不是点击目标。

使用此：

$(this).append();

而不是：

$("#SubSubgroupmain").append();

哪个应该是：

$(".SubSubgroupmain").append();

动态在单击jquery上将输入元素添加为树

2 个答案: