自举模态中的内容加载

Question

我正在使用ColdFusion 2016生成一系列记录，如下所示：

        <tr >
          <td scope="row">#POLL_NAME#</th>
          <td>
            <a href="/customcf/extras/polls/manager.cfm?svc=gp&pollID=#POLL_ID#" id="pollQ_#variables.count#">Retrieve Poll</a>

          </td>
          <td>#POLL_START#</td>
          <td>#POLL_END#</td>
          <td><cfif IS_ACTIVE is 1><i class="fa fa-toggle-on" id="activeToggleOn_#variables.count#" data-pollID = "#POLL_ID#"></i><cfelse><i class="fa fa-toggle-off" id="activeToggleOff_#variables.count#" data-pollID = "#POLL_ID#" style="color:red"></i></cfif> </td>
        </tr>

        <cfset variables.count ++>
    </cfloop>

该链接应该打开一个引导模式窗口，其中包含每次投票的数据、链接传递和ID以获取数据：

<script>
    var cnt = #variables.pollData.recordcount#;

    jQuery(document).ready(function(){
        for(k = 0; k < cnt; k++) { 
            jQuery("##pollQ_" + k).on("click", function(event){
                event.preventDefault();
                var localURL = "";
                var localURL = jQuery(this).attr('href');

                jQuery('##pollView').modal('show');

                jQuery('##pollView').on("shown.bs.modal", function(){
                    jQuery(this).find(".modal-body").load(localURL);
                });

                jQuery('##pollView').on('hidden.bs.modal', function () {
                    jQuery(this).removeData('bs.modal');
                    jQuery('##pollView .modal-content').empty();
                });

                return false;
            })
      }
     })
</script>

模式打开，但数据没有显示。当我打开工具时，每次点击都会看到对注入的url的多次调用

 /customcf/extras/polls/manager.cfm?svc=gp&pollID=31
 /customcf/extras/polls/manager.cfm?svc=gp&pollID=31
 /customcf/extras/polls/manager.cfm?svc=gp&pollID=32

似乎localURL变量没有清除，只是单击了当前的32。当我向下移动的投票名单，电话复合在一起。

我不知所措，任何帮助都将不胜感激。

Answer 1

为了简单起见，请尝试：

<a href="/customcf/extras/polls/manager.cfm?svc=gp&pollID=#POLL_ID#" class="loadMeToModal">Retrieve Poll</a>

删除你的循环，只需做

jQuery(".loadMeToModal").on("click", function(event){
    event.preventDefault();
    var localURL = jQuery(this).attr('href');
    jQuery('##pollView').find(".modal-body").load(localURL); //Load the modal
    jQuery('##pollView').modal('show'); //Show the modal
});

我做的正是您在我的站点上所做的事情，并且有一个类，它通常都是这样触发的，这样我就可以有一个侦听器来处理所有的事情，而不是每个链接的唯一侦听器。

每次单击锚时，您的代码都会添加引导侦听器。你不需要那样做。您只需要添加这些侦听器一次，但实际上，在您所做的工作中，您根本不需要这些侦听器。只需在单击加载类，然后显示。

当它们关闭模式时，不需要清除其中的数据。如果您愿意，只需在单击偶数函数之外添加以下代码，如下所示。

jQuery(".loadMeToModal").on("click", function(event){
    event.preventDefault();
    var localURL = jQuery(this).attr('href');
    jQuery('##pollView').find(".modal-body").load(localURL); //Load the modal
    jQuery('##pollView').modal('show'); //Show the modal
});
jQuery('##pollView').on('hidden.bs.modal', function () { //When the modal closes
    jQuery('##pollView .modal-content').empty(); //Clear the modal
});

或者，如果希望显示模式，然后加载，则可以清除单击时的数据，并将所有内容都包含在单个侦听器中。

jQuery(".loadMeToModal").on("click", function(event){
    event.preventDefault();
    var localURL = jQuery(this).attr('href');
    jQuery('##pollView').find(".modal-body").empty(); //Clear the modal
    jQuery('##pollView').modal('show'); //Show the modal
    jQuery('##pollView').find(".modal-body").load(localURL); //Load the modal
});

为了解释您的代码在做什么，每次有人单击您的链接时，您的代码都会添加一个监听器，上面写着“如果显示了模式，就加载这个数据”。所以当你第一次点击它的时候，它就这样做了。第二次有人单击相同的链接时，您将再次添加侦听器，因此它会触发两次。所以第四。

如果您真的想简单地修复您所拥有的并且不能使用类，请执行以下操作：

jQuery(document).ready(function(){
    for(k = 0; k < cnt; k++) { 
        jQuery("##pollQ_" + k).on("click", function(event){
            event.preventDefault();
            var localURL = "";
            var localURL = jQuery(this).attr('href');
            jQuery(this).find(".modal-body").load(localURL);
            jQuery('##pollView').modal('show');
        });
    }
    jQuery('##pollView').on('hidden.bs.modal', function () {
        jQuery(this).removeData('bs.modal');
        jQuery('##pollView .modal-content').empty();
    });
});