如何忽略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>