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

标签 javascript php jquery html

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

相关文章:

javascript - meteor 无法访问收藏

php - SQLSTATE[42000] : Syntax error or access violation :

php - 将 8 位值数组转换为 PHP 中的 wav 文件

php - CodeIgniter:将数据从模型传递到 Controller

javascript - 基于Ajax选择调用更改图表数据

javascript - 通过单击按钮更改字体颜色

javascript - 如何在 JavaScript 文件中引用导出的 TypeScript 类?

javascript - 如何调度已经在javascript中调度的事件?

javascript - 如何限制文本输入中的输入数量

jquery - Elevate Zoom 插件中的缩放图像完全相同