php 当发生onclick事件时,Javascript函数(使用 AJAX )不工作

iaqfqrcu  于 2023-01-12  发布在  PHP
关注(0)|答案(1)|浏览(110)

Onclick按钮事件无法与ajax.js函数一起工作。我无法找出问题所在以及解决问题的方法。以下是我的代码:
viewAllProduct.php

<td><button id ="editItem" class="btn btn-primary" style="height:40px; font-size:16px;" onclick="productEdit('<?=$row['product_id']?>')">Edit</button></td>

ajax.js

function productEdit(id){
    $.ajax({
        url:"./adminView/editItemForm.php",
        method:"post",
        data:{record:id},
        success:function(data){
            $('.allContent-section').html(data);
        }
    });
}
nbewdwxp

nbewdwxp1#

根据之前关于重复ID属性的评论-ID可以修改为数据集属性,不需要是唯一的,仍然允许css规则/选择器工作,并允许在需要时通过Javascript方法轻松访问。

// create a delegated event listener bound to the document in this instance.
// This can handle **ALL** clicks but we only target those of interest.
document.addEventListener('click',e=>{
  e.preventDefault();
  
  // process click events on the "editItem" buttons only.
  if( e.target instanceof HTMLButtonElement && e.target.dataset.type=='editItem' ){
    
    // send the AJAX request, using the buttons "dataset" attribute for ID
    $.ajax({
        url:"./adminView/editItemForm.php",
        method:"post",
        data:{ record:e.target.dataset.id },
        success:(r)=>{ // yeay! all good
          $('.allContent-section').html( r );
        },
        error:(err)=>{
          console.log('bogus... '+err.statusText)
        }
    });
  }
});
[data-type] {
  height: 40px;
  font-size: 16px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

<table>
  <tr>
    <td><button data-type="editItem" data-id='666' class="btn btn-primary">Edit</button></td>
    <td><button data-type="editItem" data-id='555' class="btn btn-primary">Edit</button></td>
    <td><button data-type="editItem" data-id='777' class="btn btn-primary">Edit</button></td>
  </tr>
</table>

由于Snippets on SO运行在沙箱中,这将导致错误,但您可以使用控制台工具检查网络流量,并观察 AJAX 请求是否正确发送-data-id属性在ajax有效负载中分配。

相关问题