Bootstrap 模式中的内容加载

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>

link 应该打开一个 bootstrap 模态 window，其中包含每个轮询的数据，link 通过和 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>

模式打开但数据未显示。当我打开 Chrome 开发人员工具时，我看到每次点击 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
});

我在我的网站上做的和你做的完全一样，并且有一个 class 基本上总是像这样触发它，所以我可以有一个监听器来处理所有事情，而不是每个 link.

每次单击锚点时，您的代码都会添加 bootstrap 个侦听器。你不需要那样做。您只需要添加这些侦听器一次，但实际上，对于您正在做的事情，您根本不需要这些侦听器。只需 class 单击加载，然后显示。

当他们关闭模式时，不需要清除那里的数据。如果你愿意，你可以，但只需在 click even 函数之外添加以下代码，它看起来像这样。

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
});

为了解释您的代码在做什么，每次有人点击您的 link 之一时，您的代码都会添加一个听众说 "If the modal is shown, load this data"。所以当你第一次点击一个时，它就会那样做。第二次有人单击相同的 link，您将再次添加侦听器，因此它会触发两次。以此类推。

如果您真的想简单地修复您拥有但不能使用的东西 class，请执行以下操作：

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();
    });
});

Bootstrap 模式中的内容加载

Content load in a Bootstrap Modal

javascript

coldfusion

jquery

bootstrap-modal