Question

我有以下脚本创建名称列表：

setInterval(function() {
    $.ajax({
        type: "GET",
        url: "<?php echo base_url(); ?>cashier/walkin_patient_payments",
        dataType: "JSON",
        success: function(payment_list) {
            pat_payment_list = $('#walkin_patient_payment').empty();
            if (payment_list === null) {

            } else {
                $.each(payment_list, function(i, payment_list) {
                    pat_payment_list.append('<li><a href="#walkin_patient_form" id="walkin_payment_link" class="walkin_payment_link"><i class = "glyphicon glyphicon-user"> </i>' + payment_list.walkin_patient_name + '</a><span style="color:red !important;"> Kshs : ' + payment_list.amount + '</span>\n\
          <input type="hidden" id="walkin_id_list" name="walkin_id_list" class="walkin_id_list" value="' + payment_list.walkin_id + '"/>\n\
    </br></li>');
                });
            }
        },
        error: function(data) {
            //error do something
        }
    });
}, 3000);

附加到以下UL列表：

<ul class = "dashboard-list walkin_patient_payment" id="walkin_patient_payment">
</ul>

但是当我尝试运行以下脚本时，它应该从列表中选择单个walkin id，它只提供第一个列表的值，即使我单击第5个列表。

以下是剧本：

$('.walkin_patient_payment').on('click', '.walkin_payment_link', function() {
    //get
    var walkin_id = $(this).closest('ul').find('input[name="walkin_id_list"]').val();
    alert(walkin_id);
});

实现此目的的最佳方法是什么？我究竟做错了什么？

Answer 1

这是因为你正在遍历ul元素，而.find('input[name="walkin_id_list"]')将返回ul中名为walkin_id_list的所有输入。并且在元素集合上使用.val()将仅返回第一个元素的值。

您需要使用.closest('li')代替.closest('ul')：

 var walkin_id = $(this).closest('li').find('input[name="walkin_id_list"]').val();

另请注意，您正在生成具有相同ID的元素。 ID应始终是唯一的。你可以改为使用同一个类。

Answer 2

您可以直接在li

上实施点击

$('.walkin_patient_payment li').click(function () {

            var walkin_id = $(this).find('input[name="walkin_id_list"]').val();
            alert(walkin_id);
});

jQuery从<ul>列表</ul>中检索一个值

2 个答案: