Weatherwidget.io点击提交按钮iframe仅首次加载故障求解

• weatherwidget.io的脚本自带重复加载判定：脚本内部会检测页面是否存在id为weatherwidget-io-js的script标签，存在就不会重复执行初始化逻辑，首次加载完成后，后续新增的.weatherwidget-io类的链接不会被自动识别渲染为iframe
• 你给#btnSubmit绑定了两个点击事件，第二个事件末尾的return false会阻断事件流，甚至影响前一个点击事件的执行
• 重载iframe的逻辑完全无效：你每次点击提交都会先执行$('#divResult').empty()清空容器，之前生成的iframe已经被销毁，不存在重载的基础

1. 将weatherwidget的脚本加载逻辑移到页面全局，仅加载一次，不要每次点击提交都动态插入
2. 每次渲染完新的天气链接后，主动调用weatherwidget暴露的全局初始化方法__weatherwidget_init()，触发组件重新扫描页面元素生成iframe
3. 移除多余的第二个点击事件，避免return false打断正常逻辑
4. 修正HTML中下拉选项的value错误，原来Los Angeles、Boston、Washington的value都误写为Option3，需要改为对应的值

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<!-- 全局引入天气组件脚本，仅加载一次 -->
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src='https://weatherwidget.io/js/widget.min.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','weatherwidget-io-js');</script>

<select id="selection" multiple="multiple">
  <option value="Option1">New York</option>
  <option value="Option2">San Francisco</option>
  <option value="Option3">Chicago</option>
  <option value="Option4">Los Angeles</option>
  <option value="Option5">Boston</option>
  <option value="Option6">Washington</option>
</select>
<br />
<input id="btnSubmit" class="button" type="submit" value="submit" />
<br /><br />
<div id="divResult" class="divResult"></div>

CSS #

body {
  font-family: montserratbold, montserratregular, sans-serif;
}

.compTable {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  margin: 10px;
  border: 1px solid #222;
  text-align: center;
  width: 100%;
}

JS #

jQuery(document).ready(function($) {
  var StatJSON = {
    "Option1": {
      "ColHeading": "New York",
      "Weather": "40d71n74d01/new-york",
    },
    "Option2": {
      "ColHeading": "San Francisco",
      "Weather": "37d77n122d42/san-francisco",
    },
    "Option3": {
      "ColHeading": "Chicago",
      "Weather": "41d88n87d63/chicago",
    },
    "Option4": {
      "ColHeading": "Los Angeles",
      "Weather": "34d05n118d24/los-angeles",
    },
    "Option5": {
      "ColHeading": "Boston",
      "Weather": "42d36n71d06/boston",
    },
    "Option6": {
      "ColHeading": "Washington",
      "Weather": "38d91n77d04/washington",
    },
  };

  jQuery('#btnSubmit').click(function() {
    var data = [];
    jQuery("#selection").find(':selected').each(function(e) {
      var this_input = jQuery(this);
      if (this_input.is(':selected')) {
        data.push(this_input.val());
      }
    });

    $('#divResult').empty().append(PrintTable(data));

    jQuery('#divResult table tbody tr td').each(function() {
      if (jQuery(this).text() == 'Weather') {
        jQuery(this).nextAll("td").each(function() {
          // 移除动态插入脚本的逻辑，仅保留a标签
          jQuery(this).html('<a class="weatherwidget-io" href="https://forecast7.com/en/' + jQuery(this).text() + '/" data-label_2="WEATHER" data-days="3" data-theme="original" >WEATHER</a>');
        });
      }
    });

    // 主动调用天气组件初始化方法，重新渲染新增的链接
    if (window.__weatherwidget_init) {
      window.__weatherwidget_init();
    }

    function PrintTable(data) {
      var html = '<table class="compTable"><thead><tr><th>';
      if (data && data.length) {
        html += '</th>';
        jQuery.each(data, function(i) {
          html += '<th>' + StatJSON[data[i]].ColHeading + '</th>';
        });
        html += '</tr>';
        html += '<tbody>';
        jQuery.each(StatJSON[data[0]], function(k, v) {
          html += '<tr>';
          if (k != "ColHeading") {
            html += '<td>' + k + '</td>';
          }
          jQuery.each(data, function(k2, v2) {
            if (k != "ColHeading") {
              html += '<td>' + StatJSON[data[k2]][k] + '</td>';
            }
          });
          html += '</tr>';
        });
      } else {
        html += 'No results found</td></tr>';
      }
      html += '</tbody></table>';
      return html;
    }
  });
});

内容的提问来源于stack exchange，提问作者Mithun Uchil