Javascript function（使用 ajax）在 onclick 事件时不工作

Question

The Onclick button event is not working with the ajax.js function. I can't figure it out what is the problem and the solution to solve the problem. Below are my code:

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);
        }
    });
}

Answer 1

As per previous comments regarding duplicate ID attributes - the ID can be modified to become a dataset attribute which do not need to be unique and still allow css rules/selectors to work and allow easy access via Javascript methods if required.

 // 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>

Because of the sandbox in which Snippets on SO run this will cause errors but you can inspect the.network traffic using the console tools and observe that the AJAX request is sent correctly - the data-id attributes are assigned within the ajax payload.