document.on定位到点击的是哪个class="card"下的start按钮

1.使用了document.on解决去动态生成input无法触发click事件的问题
2. 怎样定位到点击的是哪个card下的start?

  <div style="height:300px"  class="card">
                            <div class="well well-lg" style="padding:2px;margin-top:2px;font-size:14px;color:#007A7c;border:solid;border-width:1px;">
                                <div class="input-group" name="ops">
                                        <input type="button" class="input-group-addon pull-right" value="start" style="font-size:14px;margin-left:2px" name="start" />  
                                </div>
           <div class="input-group" name="ops">
                                        <input type="button" class="input-group-addon pull-right" value="start" style="font-size:14px;margin-left:2px" name="start" />  
                                </div>
               <div>
                            <input type="text" style="font-size:large;border:none" name="IPAddr" />
                        </div>
                            </div>
                        </div>

  <div style="height:300px"  class="card">
                            <div class="well well-lg" style="padding:2px;margin-top:2px;font-size:14px;color:#007A7c;border:solid;border-width:1px;">
                                <div class="input-group" name="ops">
                                        <input type="button" class="input-group-addon pull-right" value="start" style="font-size:14px;margin-left:2px" name="start" />  
                                </div>
           <div class="input-group" name="ops">
                                        <input type="button" class="input-group-addon pull-right" value="start" style="font-size:14px;margin-left:2px" name="start" />  
                                </div>
               <div>
                            <input type="text" style="font-size:large;border:none" name="IPAddr" />
                        </div>
                            </div>
                        </div>

 $(document).on("click", "input[name='start']", function () {
}

【以下回答由 GPT 生成】

可以通过以下步骤使用document.on方法来定位到点击的是哪个class="card"下的start按钮：

1. 首先，使用document.querySelector方法选择所有的class为"card"的元素，并使用forEach方法遍历这些元素。
2. 在每个card元素内部，使用document.querySelector方法选择所有的class为"start"的按钮元素，并使用forEach方法遍历这些按钮元素。
3. 在按钮元素上绑定click事件处理程序，用于处理按钮点击事件。
4. 在事件处理程序中，使用event参数获取被点击的按钮元素。通过按钮元素的parentNode属性可以获取到其父元素，即class为"card"的元素。
5. 最后，在事件处理程序中，你可以根据需要执行针对不同card的操作。

下面是具体的代码实现：

document.on('click', '.start', function(event) {
  // 获取被点击的按钮元素
  var startButton = event.target;
  // 获取按钮元素所在的card元素
  var cardElement = startButton.parentNode.parentNode;

  // 在这里可以根据cardElement执行相应的操作
});

你可以将上述代码放在你的页面的script标签内，或者将其保存在一个单独的JavaScript文件中，并在页面的script标签内引入该文件。这样，当用户点击任何一个class为"start"的按钮时，事件处理程序将会执行，并获取所点击的按钮元素所在的card元素。你可以根据需要在事件处理程序中添加适当的操作。