如何忽略javascript，直到点击按钮，然后运行

Question

我一直在向我们的主页添加门票销售，但它大大降低了网站的速度。本季我们有大约1250个节目，尽管在主页上增加了销售额，但人们抱怨速度。

目前，我正在使用javascript：showhide将购票信息保存在隐藏的div中，该隐藏的div显示您何时点击购买门票。

我希望它不会在隐藏的div中运行任何东西，除非购买票据按钮是点击。然后，它会拉票务信息和填充分区。

我们将在Show1-Oct，Show2-Oct，Show3-Oct，Show1-Nov，Show2-Nov，Show3-Nov等网页上同时显示约300张票务脚本。

任何想法或帮助，非常感谢。

<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>