Question

我有以下JQuery脚本：

<script>
    $(document).ready(function() {
        setInterval(function() {
            $.ajax({
                type: "GET",
                url: "<?php echo base_url(); ?>transactions/user_requests",
                dataType: "JSON",
                success: function(request) {
                    request_list = $('#request_list').empty();
                    if (request === null) {
                        request_list.append("<p>No Active Requests</p>");
                    }
                    else {
                        $.each(request, function(i, request) {
                            request_list.append('<ul><a class="request_list"  id="request_list" href="#active_request_list">' + request.department_name + '</a></ul>');
                            $.ajax({
                                type: "GET",
                                url: "<?php echo base_url(); ?>transactions/user_requests_detials",
                                dataType: "JSON",
                                success: function(request_list) {
                                    request_list_details = $('#request_list_details').empty();
                                    if (request_list === null) {
                                        request_list_detials.append("<ul>No Active Requests</ul>");
                                    } else {
                                        $.each(request_list, function(i, request_list) {
                                            request_list_details.append('<dt span="font_color:white !important;"><a href="<?php echo base_url(); ?>transactions/details/' + request_list.request_order_id + '">' + request_list.department_name + '</a></dt>\n\
                                                    <dd><label style="float:left !important;">Commodity Name:</label><span style="color:red !important;">' + request_list.commodity_name + '</span></dd>\n\
                                                    <dd><label style="float:left !important;"> Quantity Requested:</lable><span style="color:red !important;">' + request_list.total_quantity_requested + '</span></dd>\n\
                                                    <dd><label style="float:left !important;">Request Order ID:</label><span style="color:red !important;">' + request_list.request_order_id + '</span></dd>\n\
                                                    <dd><label style="float:left !important;">Date Requested : </label><span style="color:red !important;">' + request_list.date_added + '</span></dd> \n\
                                                     <a class="approve" id="approve" href="#stock_details">Approve </a>');
                                        });
                                    }
                                },
                                error: function(data) {
                                }
                            });
                        });
                    }
                },
                error: function(data) {
                    //  alert('An error occured, kindly try later');
                }
            });
        }, 2000);
    });
</script>
<div class='request'>
    <p>Request List</p><br>
    <ul id='request_list'></ul>
</div>

上面加载了所有请求的列表以及用于批准请求详细信息的链接，当单击链接时，应该运行以下脚本：

<script>
    $(document).ready(function() {
        alert('Alert!!!');
        $('.approve').click(function() {
            alert('Alert!!');
            request_order_id = $('#request_order_id').val();
            alert(request_order_id);
            html1 = '';
            htmlhead1 = '';
            $.ajax({
                type: "GET",
                url: "<?php echo base_url();?>transactions/to_be_issued_details/" + request_order_id,
                dataType: "json",
                success: function(data) {
                    for (i = 0; i < data.length; i++) {
                        html1 += '<tr>\n\
      <td><input type="text"  id="commodity_name' + i + '" name="commodity_name[]" value="' + data[i].commodity_name + '"/></td>\n\
      <td><input type="text" class="SmallInput" id="batch_no' + i + '" name="batch_no[]" value="' + data[i].batch_no + '"/></td>\n\
      <td><input type="text" class="SmallInput" id="total_quantity_requested' + i + '" name="total_quantity_requested[]" value="' + data[i].total_quantity_requested + '"/></td>\n\
      <td><input type="text"  id="request_order_id' + i + '" name="request_order_id[]" value="' + data[i].request_order_id + '"/></td>\n\
      <td><input type="text" class="SmallInput" id="total_quantity' + i + '" name="total_quantity[]" value="' + data[i].total_quantity + '"/></td>\n\
      <td><input type="text" class="SmallInput" id="department' + i + '" name="department[]" value="' + data[i].department + '"/></td>\n\
     <td><input type="text" class="SmallInput" id="user_name' + i + '" name="user_name[]" value="' + data[i].user_name + '"></td> \n\
      <td></td><td></td></tr> ';
                    }
                    htmlhead1 += '\n\
           <th>Commodity Name</th>\n\
           <th>Batch Number</th> \n\
          <th>  Category</th>         \n\
          <th>Units per Pack </th> \n\
          <th>No of Packs</th>\n\
          <th>Total  Quantity</th>\n\
          ';
                    $('#thead1').empty();
                    $('#tbody1').empty();
                    $('#thead1').append(htmlhead1);
                    $('#tbody1').append(html1);
                },
                error: function(data) {

                }
            })
        });
    });
</script>

应该给我更多有关请求的详细信息，当我点击Approve按钮时，click功能根本没有响应，这是我能解决这个问题的最佳方法吗？

Answer 1

这是因为您在点击事件存在之前将其分配给.approve。

你想要的是：

$("body").on("click", ".approve", function () {
    //Your code
});

这样，使用委托，您可以为body分配一个监听器（但是如果在创建事件监听器时它存在，则最好将它分配给不太通用的容器，如#request_list_details）并且点击事件“冒泡”试图找到具有类approve的元素。通过这种方式，您可以使用该类动态添加元素，但它们仍会响应该事件。

您可以在官方jQuery API Documentation page了解更多相关信息。

Answer 2

使用on()的委托：

$('#request_list_details').on('click','.approve',function(){
     //...
});

JQuery Click函数没有响应单击

2 个答案: