Weatherwidget.io - 单击按钮时不重新加载 iframe

Question

我有一个动态表，每次单击“提交”按钮时，都需要显示从选项中选择的位置的天气。我正在使用脚本“weatherwidget.io”来显示天气详细信息。

$("#btnSubmit").click(function() {
jQuery('#divResult table tbody tr td').each(function ($) {
    if (jQuery(this).text() == 'Weather') jQuery(this).nextAll("td").each(function ($) {
        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><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>');
    });
});
});

链接中的“iframe”仅在首次选择地点并单击“提交”时加载。第二次它只显示没有 iframe 的“天气”href 链接。

我尝试使用以下代码在每次单击“提交”时重新加载“iframe”，但它不起作用。

$("#btnSubmit").click(function() {
        jQuery.each($("iframe"), function() {
            $(this).attr({
                src: $(this).attr("src")
            });
        });
        return false;
});

如何让它在每次点击“提交”按钮时加载天气小部件的 iframe？

找到下面的代码：

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

    function PrintTable(data) {
      var html = '<table class="compTable"><thead><tr><th>';
      if (data && data.length) {
        html += '</th>';
        jQuery.each(data, function(i) {
          //getting heading at that key
          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;
    }

  });

  $("#btnSubmit").click(function() {
    jQuery.each($("iframe"), function() {
      $(this).attr({
        src: $(this).attr("src")
      });
    });
    return false;
  });

});

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.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="Option3">Los Angeles</option>
  <option value="Option3">Boston</option>
  <option value="Option3">Washington</option>
  <br />
  <input id="btnSubmit" class="button" type="submit" value="submit" />
</select>
<br /><br />
<div id="divResult" class="divResult"></div>

Jsfiddle：https://jsfiddle.net/s469xb0n/

Answer 1

您可以在页面中只包含一次天气 API 脚本，而不是每次单击提交按钮时都包含天气 API 脚本，并使用 init 方法在动态生成的 html 上呈现您的天气 API。

所以只要包括这个：

<script id="weatherwidget-io-js" src="https://weatherwidget.io/js/widget.min.js"></script>

然后使用：

__weatherwidget_init();

工作代码：

https://jsfiddle.net/Swati_911/juc7Lhgf/1/