<?php
foreach( $direc as $direccion ) {
?>
<li class="list-group-item">
<div class="row align-items-center no-gutters">
<div class="col mr-2">
<!--
Change the `option` to another element such as `i` as used here.
Change the ID to a `data-id` so that duplicate IDs are not observered in the DOM.
Remove inline event handler and assign external event listener later.
Assign `data-set` attributes so that the event listener can obtain required information when the `i` element is clicked.
-->
<i data-id='hijo' data-zona='<?= $direccion['nombre_zona']; ?>' data-value='<?= $direccion['first_name'];?> <?= $direccion['last_name'];?>' >
<h4 class="mb-0">
<strong><?=$direccion['first_name']; ?> <?=$direccion['last_name']; ?>, Zona--><?=$direccion['nombre_zona']; ?></strong>
</h4>
</i>
</div>
<div class="col-auto">
</div>
</div>
</li>
<?php
}//end foreach loop
?>
和外部事件监听器:
<script>
document.querySelectorAll('i[ data-id="hijo" ]').forEach( i=>i.addEventListener('click',function(e){
e.preventDefault();
e.stopPropagation();
<?php
printf(
'const url="%s/Administracion/paneladminreddos";',
base_url()
);
?>
// Use `this` to access (dataset) properties of the `i` element.
// Construct the payload for the POST request.
let data={
'padre':this.dataset.value,
'zona':this.dataset.zona
};
$.ajax({
data:data,
url:url,
type:'post',
beforeSend:()=>$('#content').html('Procesando, espere por favor...'),
success:(r)=>$('#content').html(r),
error:(e)=>console.log(e)
});
}));
</script>
2条答案
按热度按时间5kgi1eie1#
我将重写HTML部分以纠正先前标识的标记错误,并在呈现列表后绑定事件处理程序。
和外部事件监听器:
一个例子
第一次
pw136qt22#
Foreach函数将是循环,重复标记。所以如果你设置id,我认为你可以通过数字顺序或ID来设置。