我有一个完全由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

最佳答案

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

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

在以下示例中(我打开了display<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>

<!-- loaded popover content -->
<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>





还要注意,您正在循环内创建popover-content ID,这将提供无效的标记。这种无效的标记还会导致JavaScript选择器仅在尝试定位这些元素时才返回第一个结果。在示例中,我已将其切换为类。

希望这可以帮助!

关于javascript - jQuery在循环中填充其他元素内的按钮ID,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/48512361/

10-12 00:02
查看更多