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