Javascript函數僅在第二次單擊時有效

Question

我正在嘗試獲取特定患者的處方詳細信息，並且相應的結果顯示在模式窗口中。 問題是只有第二次點擊才能獲得第一個結果。 連續單擊后，將獲得先前數據的結果。 以下是我的HTML：

<table class="table">
    <thead>
        <tr class="text-center" style="font-weight: bold">
            <td></td>
            <td>Name</td>
            <td>ID</td>
            <td>Age</td>
            <td>Registered On</td>
            <td>View Prescription</td>
        </tr>
    </thead>
    <tr class="text-center">
        <td><input name="name" type="text"></td>
        <td><input name="id" type="text"></td>
        <td><input name="age" type="text"></td>
        <td><input name="reg_on" type="text"></td>
        <td>
            <button id="view_prescription_from_patient_list" value="register" onclick="view_prescription_from_patient_list(this.value)">
                <span class="glyphicon glyphicon-share"></span>
            </button>
        </td>
    </tr>
    <div class="modal_show"></div>

function view_prescription_from_patient_list(patient_id) {
    var dataString = "get_what=prescription_list_for_patient_list&patient_id=" + patient_id;
    $.ajax({
        type: "GET",
        url: "ajax_get_data.php",
        data: dataString,
        dataType: "html",
        success: function(response) {
            $('.modal_show').append(response);
        }
    })
}

我在javascript中嘗試過on.click方法，但是也有同樣的問題。

Answer 1

您正在傳遞“注冊”值（單擊按鈕中的this.value ）。

而是使用jQuery連接並處理click事件（刪除嵌入式onclick處理程序）。

例如

$('#view_prescription_from_patient_list').click(function(){ 
        var patient_id = $(this).closest('tr').find('[name=id]').val();
        var dataString = "get_what=prescription_list_for_patient_list&patient_id=" +  patient_id;
        $.ajax({
           type: "GET",
            url: "ajax_get_data.php",
            data: dataString,
            dataType: "html",
            success: function(response) {
                $('.modal_show').append(response);
            }
        })
    }
});

這將從name="id" TD （可能具有ID值-但未在示例HTML中顯示）中獲取專利ID。

如果您的代碼未遵循其引用的DOM元素，則還需要將其包裝在DOM ready處理程序中：

$(function(){
    // Your code here
});

注意： $(function(){只是$(document).ready(function(){

Answer 2

帶有jquery的代碼on.('click' ，您可以從父td獲得Patient_id，例如$(this).parent().parent().find('input[name=id]').val();

此代碼可以幫助您了解

 $('#view_prescription_from_patient_list').on('click',function(){ var patientId = $(this).parent().parent().find('input[name=id]').val(); var dataString = "get_what=prescription_list_for_patient_list&patient_id="+patientId; $.ajax( { type:"GET", url:"ajax_get_data.php", data:dataString, dataType:"html", success:function(response) { $('.modal_show').append(response); } } ) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="table"> <thead> <tr class="text-center" style="font-weight: bold"> <td></td> <td>Name</td> <td>ID</td> <td>Age</td> <td>Registered On</td> <td>View Prescription</td> </tr> </thead> <tr class="text-center"> <td><input name="name" type="text"></td> <td><input name="id" type="text"></td> <td><input name="age" type="text"></td> <td><input name="reg_on" type="text"></td> <td><button id="view_prescription_from_patient_list" value="register" ><span class="glyphicon glyphicon-share"></span></button></td> </tr> 

Answer 3

您正在讀取錯誤的值，如先前答案中指出的那樣。
我建議也使用Unobtrusive JavaScript

$( document ).ready(function(){

    $('#view_prescription_from_patient_list').on('click', function(){
        var patient_id = $('[name="id"]', $(this).closest('tr')).val(),
            dataString = "get_what=prescription_list_for_patient_list&patient_id="+patient_id;
        $.ajax({
            // ...
        });
    });
});

---

如果由於某種原因（雖然您不應該）確實需要堅持使用onclick屬性，請將按鈕傳遞給方法：

<button id="view_prescription_from_patient_list" value="register" onclick="view_prescription_from_patient_list(this)">
     <span class="glyphicon glyphicon-share"></span>
</button>

然后在JS中：

function view_prescription_from_patient_list(btn) {
    var patient_id = $('[name="id"]', $(btn).closest('tr')).val(),
        dataString = "get_what=prescription_list_for_patient_list&patient_id=" + patient_id;
    $.ajax({
        // ...
    });
}

Answer 4

由於您已經在使用jQuery，因此可以使用jQuery連接按鈕的“ onclick”事件。

您需要像這樣連接事件處理程序。

$(document).ready(function() {
    $('#view_prescription_from_patient_list').on('click', function(e) {
        e.preventDefault();

        var patientId = $(this).parent().parent().find('input[name=id]').val();

        // do your ajax call here...
    });
});