無法在jQuery ajax表數據中使用按鈕onclick調用函數

Question

我正在嘗試對動態表行數據執行刪除操作。 由於某些原因，當我單擊刪除按鈕時，未調用刪除功能！ 這段代碼有什么問題，如果有的話，請告訴我。

我仍然是初學者。

 data = ""; // to delete delete_ = function(user_email) { alert("inside delete"); }; myfunction = function() { $(".tablecontainer").show(); load(); }; load = function() { $.ajax({ url: "updatedservicerequests", type: "POST", data: {}, success: function(response) { alert(response.message); data = response.data; alert(response.data); $(".tr").remove(); alert(response.data); $(function() { for (i = 0; i < response.data.length; i++) { $("#table").append("<tr> <td> " + response.data[i].user_email + " </td> <td> " + response.data[i].booking_number + " </td> <td> " + response.data[i].booking_address + " </td> <td> " + response.data[i].booking_date + " </td> <td> " + response.data[i].booking_message + " </td> <td> " + response.data[i].request_date + " </td> <td> " + response.data[i].chosen_emails_1 + " </td> <td> " + response.data[i].chosen_emails_2 + " </td> <td> " + response.data[i].chosen_emails_3 + " </td> <td> <button onclick='edit(" + response.data[i].user_email + ");'> Edit </button> <br> <button onclick='delete_(" + response.data[i].user_email + ");'> Delete </button> </td> </tr>"); } }); }, error: function(response) { alert("unable to pull up any service request"); } }); //to prevent (contact-submit) button from submitting form data since submit button has default action of submitting form $(document).ready(function() { $("#contact-submit").click(function(e) { return false; }); }); }; 

 <button onclick="myfunction();">Go</button> <div class="tablecontainer" style="display: none;"> th&gt; <table border="1" id="table"> <tr> <th>booking_email</th> <th>booking_number</th> <th>booking_address</th> <th>booking_date</th> <th>booking_message</th> <th>when the request was made</th> <th>requested_tech_1</th> <th>requested_tech_2</th> <th>requested_tech_3</th> <th>operations</th> </tr> </table> </div> 

Answer 1

您的問題有一個相對簡單的解決方案。 我個人使用了一個名為DataTables的jQuery表插件，可在此處找到

我鼓勵您研究它，因為它絕對是一個強大的工具。 關於您的主要問題“如何刪除表中的一行數據？” 這比較簡單。 因此，您可以使用jQuery的.each而不是使用for循環遍歷數據，這也非常容易。 我將在這里向您展示此方法，如果您想查看DataTables版本，可以在以后的響應中添加更多方法。

# please note that I use ES6 syntax in JS.
# this: function() {...code here...}
# is the same as this: (()=> {...code here...});
# ES6 allows for shorthand annonymous functions

// wait for document to load
$(document).ready(()=> {
    // declare variable
    let foo = "hello world";
    // fetch data from the back end
    $.get("data.php?foo=" + encodeURIComponent(foo), (data)=> {
        # the $.get is the exact same as the AJAX code you used above but shorthanded
        // the 'data' is a parameter in the annonymous function that is storing the data from the back end
        console.log(data); // test that we are getting the data properly
        // remove table rows if they exist
        $("#mytable tbody").remove();
        $("#mytable").each(data, (i, item)=> {
            // add your data to the table by appending to the table
            # You would just continue this until you have all the cells you need filled. I'm going to skip to the end with adding the btn now
            $("#mytable").append('<tbody><tr><td>'+item.booking_email+'</td><td>'+item.booking_number+'</td><td><button class="btn btn-lg btn-danger deletebtn" id="'+item.booking_number+'">Delete</button></td></tbody>');
            /* the button has to have a unique ID to be called on so I assigned it the booking numbers to the ID. 
            Here's how we would call on it*/
            $(".deletebtn").unbind().click((d)=> {
                // you must unbind it first or you will have multiple events fire and you only want a single event to fire
                // pass the annonymous function a parameter (can be anything really I use d for delete)
                console.log(d.target.id); // check to make sure the button is getting an ID.
                // post to back end to delete then when it succeeds, we delete that row.
                $.post("data.php", {deletefoo: d.target.id}, (data)=> {
                    // delete row by calling on the target and removing the parent in this case being the row 'tr'
                    $(d.target).parents('tr').remove();
                });
            });
        });
        $("#mytable").show();
    });
});

希望這對您有幫助。 讓我知道它是否對您有幫助/有用。