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