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>

该链接应该打开一个bootstrap模态窗口，其中包含每个轮询的数据，链接传递和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开发者工具时，我会看到每次点击多次调用注入的网址

 /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 var不能清除，除了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
});

我完全按照您的网站进行操作，并且只有一个类总是触发它，因此我可以使用单个侦听器来处理所有内容而不是每个链接的唯一侦听器。

每次单击锚点时，您的代码都在添加引导侦听器。你不需要这样做。您只需要添加一次这些侦听器，但实际上，根据您的操作，您根本不需要这些侦听器。只需按下点击然后显示的负载。

当他们关闭模态时，无需清除其中的数据。如果您愿意，只需将以下代码添加到OUTSIDE点击均匀功能，这样就可以了。

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

Bootstrap模式

1 个答案: