javascript - 由另一个 ajax 函数触发的 Ajax 函数不起作用

Question

我正在编写一个脚本，该脚本从一个表中复制行 ID，并在页面上创建一个新表，其中包含通过复选框选择的所有行，以便创建所选结果的比较表，我遇到了我的两个 ajax 调用之间的协同问题。

当在原始表中创建以下行时，分配给 <a> 的类该行的元素触发 ajax 调用，然后填充一个带有附加信息的模式，该模式显示在页面上。

这是一行

echo "<td><a id='$id' data-toggle='modal' href='#provmodal' class='push'>".$results['provider_name']."</a>";

当以这种方式触发模式时，信息就会很好地填充。

现在，在填充新表的脚本中，我调用另一个单独的脚本，该脚本重新查询所选行 ID 并设置 html。

这是脚本的该部分:

 $('.compareCheck:checked').each(function(){
            var ele_id = $(this).attr('id');
            $.ajax({
            type : 'post',
            url : 'compare.php', //query 
            data :  'post_id='+ ele_id, // passing id via ajax
            dataType: "json",
            success : function(data){
                var row = "<tr class='removeRow'>";
                row += "<td>" + data.provider_num + "</td>";

//HERE IS WHERE THE RE-CREATION OF THE MODAL CALL GOES \/

                row += "<td><a id='" + ele_id + "' data-toggle='modal' href='#provmodal' class='push'>" + data.provider_name + "</a></td>";

                row += "<td style='text-align:right;'>$" + formatNumber(data['233_net_charity_care']) + "</td>";
                row += "<td style='text-align:right;'>$" + formatNumber(data['291_cost_of_non_mcr_bad_debts']) + "</td>";
                row += "<td style='text-align:right;'>$" + formatNumber(data['301_cost_of_uncomp_care']) + "</td>";
                row += "<td style='text-align:right;'>" + ((data['233_net_charity_care']/data['301_cost_of_uncomp_care'])*100).toFixed(1) + "%</td>";
                row += "<td style='text-align:right;'>" + ((data['291_cost_of_non_mcr_bad_debts']/data['301_cost_of_uncomp_care'])*100).toFixed(1) + "%</td>";
                row += "</tr>";
                $("#compareTable > tbody").append(row);
              }
            });
              });

正如您在我当前的实现中所看到的，我正在使用 ele_id var，但我也尝试过类似 data.id 的东西和data['id'] 。所有这些都会触发模式，但不会从 php 脚本中产生任何结果。

这是我的两个 php 脚本:

脚本 A:填充模式 - (modalquery.php)

<?php
require_once("link_costreport_2013.php");
$id = $_POST['post_id'];
$modalquery = $link->prepare("SELECT * FROM s10 WHERE id = :id");
$modalquery->bindParam(':id', $id, PDO::PARAM_INT);
$modalquery->execute();
$modalresults = $modalquery->fetch();
print_r("<h4>State: ".$modalresults['state']."</h4>");
print_r("<h4>City: ".$modalresults['city']."</h4>");
print_r("<h4>Street: ".$modalresults['street']."</h4>");
print_r("<h4>Zip: ".$modalresults['zip']."</h4>");
print_r("<h4>County: ".$modalresults['county']."</h4>");
?>

和脚本 B - 将重新查询转换为新比较表 (compare.php) 的值的脚本

<?php
include_once('functions.php');
include_once('link_costreport_2013.php');
if(isset($_POST['post_id'])){
    $id = $_POST['post_id'];
}
    $query = $link->prepare("SELECT * 
                FROM `s10`
                            WHERE `id` = :id");
    $query->bindParam(':id', $id, PDO::PARAM_INT);
    $query->execute();
    $results = $query->fetch(PDO::FETCH_ASSOC);
    echo json_encode($results);
?>

如果有帮助的话，这是我用于转动 .push 的脚本类到 ajax 调用的触发器中，该调用返回模式内容。

$(function(){
            $('.push').click(function(){
            var ele_id = $(this).attr('id');

            $.ajax({
            type : 'post',
             url : 'modalquery.php', // in here you should put your query 
            data :  'post_id='+ ele_id, // here you pass your id via ajax .
                   // in php you should use $_POST['post_id'] to get this value 
             success : function(r)
             {
                // now you can show output in your modal 
              $("#provmodal .modal-body").html(r).promise().done(function(){
              $("#provmodal").modal('show');  
                           });
             }
               });
              });
          });

我刚开始以这种方式使用 ajax 和 jquery，所以任何见解都会很棒。

提前致谢

:编辑:这是 json_encode($results) 的输出当ID=1时

{"id":"1","report_record_num":"548598","provider_num":"381301","provider_name":"COTTAGE GROVE COMMUNITY HOSPITAL","street":"1515 VILLAGE DRIVE","city":"COTTAGE GROVE","county":"LANE","state":"OR","zip":"97424-9700","cbsa":"21660","urban_or_rural":"Rural","ownership_type":"Voluntary, Nonprofit, Church","divider":"","divider2":"","1_cost_to_charge_ratio":"0.703459","2_net_rev_from_mcd":"3920096","3_recieve_sup_mcd_payments":"Y","4_include_if_yes":"N","5_dsh_or_sup_payments":"84890","6_medicaid_charges":"6192717","7_medicaid_cost":"4356323","8_dif_net_rev_and_cost":"351337","9_schip_net_rev":"0","10_stnd_alone_schip_charges":"0","11_stnd_alone_schip_cost":"0","12_diff_schip_rev_and_cost":"0","13_net_rev_from_state_local":"0","14_charge_under_state_law":"0","15_state_local_program_cost":"0","16_dif_between_net_rev_and_cost":"0","17_private_grants_and_donations":"6886","18_gov_grants":"0","19_tot_unreim_cost_mcd_schip_gov":"351337","201_tot_init_charity_for_uninsured":"593922","202_tot_init_charity_for_insured":"1072203","203_tot_init_charity_all":"1666125","211_cost_of_init_charity":"417800","212_cost_of_init_charity":"754251","213_cost_of_init_charity":"1172051","221_partial_pmt_charity_pat":"4385","222_partial_pmt_charity_pat":"8868","223_partial_pmt_charity_pat":"13253","231_net_charity_care":"413415","232_net_charity_care":"745383","233_net_charity_care":"1158798","241_charges_beyond_los_inc":"N","251_charges_beyond_los_lim":"0","261_total_bed_debts":"0","271_medicare_bad_debts":"79275","281_non_medicare_bad_debts":"-79275","291_cost_of_non_mcr_bad_debts":"-55767","301_cost_of_uncomp_care":"1103031","311_cost_of_unreim_and_uncomp":"1454368"}

:EDIT2:好的，所以我回去拍了一些正在发生的事情的照片。不知何故，我的模式文本没有出现在第二个表 <a class="push"> 中元素。以下是图片:

!( http://imgur.com/xgsOzSy ) - 这是在第一个表中 !( http://imgur.com/uSsI3DM ) - 这是按下同一链接时第二次发生的情况。我相信它不会触发 ajax .push 调用。

Answer 1

尝试改变:

$(document).on('click','.push',function(){

对于:

$('.push').on('click', function(){

在第一种情况下，事件处理程序被添加到执行“click”函数时 DOM 中存在的“push”类的每个元素中。第二种情况，即使用“on”函数的情况，它将事件处理程序添加到已经存在的元素和 DOM 中尚未存在的元素中，以及在执行附加操作后创建的元素，例如添加到的元素表。

希望我能清楚地表达自己，我正在努力提高我的英语水平。