Question

我有一个完全由foreach循环填充的html元素。如何获取按钮的值，例如删除按钮？或者如何获取链接编辑按钮？

@foreach($data as $d)

          <div class="col-xs-6 col-md-2">
            <a href="#" class="cab" id="thumbnail{{ $d->id }}" data-toggle="popover" data-trigger="focus">
              <img src="{{ asset('images/cabinet.png') }}" alt="..." class="img-thumbnail" >
              <p class="text-center">{{ $d->description }}</p>
            </a>
          </div>

           <!-- loaded popover content -->
           <ul id="popover-content" class="list-group{{ $d->id }}" style="display: none">
             <a href="#" class="list-group-item">Share</a>
             <a href="#" id="edit{{ $d->id }}" class="list-group-item open-modal" data-value="{{ $d->id }}">Edit</a>
             <button class="list-group-item mt-sweetalert-delete" value="{{ $d->id }}">Delete</button>
           </ul>


        @endforeach

Answer 1

您可以使用常规的jQuery / JavaScript选择器来定位所需的元素。这取决于您何时想要抓取元素，但考虑到您的元素是动态生成的，您需要提升范围并使用 event delegation 。

在下面的示例中，我将一个事件侦听器附加到<body>标记，这很有用，因为它在页面加载时始终存在于页面上。此侦听器查找任何<button>元素的点击次数，如果找到，则会记录按钮的value。因为处理程序在<body>上，所以这适用于动态生成的按钮。

这可以在以下示例中看到（我打开了display的{{1}}），单击<ul>时会触发该示例。您点击的元素存储为Delete：

e.target

document.getElementsByTagName("body")[0].addEventListener("click", function(e) {
  if (e.target && e.target.matches("button")) {
    console.log("Clicked: " + e.target.value);
  }
});

另请注意，您在循环内创建了<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="col-xs-6 col-md-2"> <a href="#" class="cab" id="thumbnail{{ $d->id }}" data-toggle="popover" data-trigger="focus"> <img src="{{ asset('images/cabinet.png') }}" alt="..." class="img-thumbnail"> <p class="text-center">{{ $d->description }}</p> </a> </div>  <ul class="list-group{{ $d->id }} popover-content" style="display: block"> <a href="#" class="list-group-item">Share</a> <a href="#" id="edit{{ $d->id }}" class="list-group-item open-modal" data-value="{{ $d->id }}">Edit</a> <button class="list-group-item mt-sweetalert-delete" value="{{ $d->id }}">Delete</button> </ul> ID，这将提供无效的标记。此无效标记还将导致JavaScript选择器仅在您尝试定位这些元素时返回第一个结果。在我的例子中，我把它改成了一个类。

希望这有帮助！

jQuery在循环填充的其他元素中获取按钮的id

1 个答案: