如何忽略JavaScript，直到單擊按鈕，然后運行

Question

我一直在將門票銷售添加到我們的主頁，但是這大大降低了網站的速度。 這個季節我們大約有1250場演出，盡管將其添加到主頁上的銷售量有所增加，但是人們抱怨它的速度。

目前，我正在使用javascript：showhide將購票信息保存在一個隱藏的div中，該信息會在您單擊“購買購票”時顯示。

我想讓它在隱藏的div中不運行任何東西，除非單擊“購買票證”按鈕。 然后它將提取票證信息並填充div。

一次，我們將在頁面上顯示大約300個售票腳本，例如Show1-Oct，Show2-Oct，Show3-Oct，Show1-Nov，Show2-Nov，Show3-Nov等。

任何想法或幫助將不勝感激。

<div class='topShow bg-Show-Main'>
  <a href='Show1.php'><img alt='Show1' title='Show1' src='images/show/Show1.jpg'>
    <p class='title'>Show1</p>
    <p>Opens October 30th</p>
  </a>
  <div class='btnContainer2'>
    <a class='btn1' style="text-align: left; width:49%; display: inline-block;" href='Show1.php'>More info</a>
    <a class='btn2 red' style="text-align: right; width:50%;  display: inline-block;" href="javascript:showhide('Show1-Oct')">Buy Tickets</a>
  </div>
  <div id="Show1-Oct" style="display:none;">
    <script type="text/javascript" src="http://website.com/booking/index.php?controller=FrontEnd&action=ActionLoad&theme=10&view=list&icons=T&cid=15&locale=1"></script>
  </div>
  <div class='clear'></div>
</div>
<div class='topShow bg-Show-Main'>
  <a href='Show2.php'><img alt='Show2' title='Show2' src='images/show/Show2.jpg'>
    <p class='title'>Show2</p>
    <p>Opens October 31st</p>
  </a>
  <div class='btnContainer2'>
    <a class='btn1' style="text-align: left; width:49%; display: inline-block;" href='Show2.php'>More info</a>
    <a class='btn2 red' style="text-align: right; width:50%;  display: inline-block;" href="javascript:showhide('Show2-Oct')">Buy Tickets</a>
  </div>
  <div id="Show2-Oct" style="display:none;">
    <script type="text/javascript" src="http://website.com/booking/index.php?controller=FrontEnd&action=ActionLoad&theme=10&view=list&icons=T&cid=16&locale=1"></script>
  </div>
  <div class='clear'></div>
</div>

Answer 1

為頁面上的每個元素加載單獨的javascript文件是一個非常糟糕的主意。

更為明智的設計是擁有一個腳本，該腳本在需要時（當用戶單擊“購買票證”按鈕時）對每個列表進行必要的數據ajax調用，並將其注入到頁面中。 遵循以下原則：（從示例代碼中刪除了一些多余的HTML，但是您會明白的）

 $('.btn2').on("click", function() { var myId = $(this).parent().next().attr("id"); // or store this as a data attribute on the button or somewhere else conveniently accessible console.log("Get data for ", myId); $.get("/whatever?id=" + myId, function(response) { // assuming that ajax call returns html, just inject it into the div: $('#" + myId').html(response); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='topShow bg-Show-Main'> <div class='btnContainer2'> <a href="#" class='btn2 red'>Buy Tickets</a> </div> <div id="Show1-Oct"> </div> <div class='clear'></div> <div class='btnContainer2'> <a href="#" class='btn2 red'>Buy Tickets</a> </div> <div id="Show2-Oct"> </div> <div class='clear'></div> </div>