在PHP文件將內容注入HTML文檔后，是否可以調用jquery腳本？

Question

我的網站：

http://student.athabascau.ca/~coreyhe/homepage.html
Vistor輸入位置和日期
js文件從geobytes.com獲取坐標，從jquery-ui datepicker獲取日期。
js文件將十進制坐標和日期傳遞給PHP文件。
PHP文件查詢表並返回附近的活動和位置
在“Dark Sky Preserves”輸出部分中，我在PHP文件中編碼了一個按鈕作為內容的按鈕

按鈕：

單擊時，我將坐標復制到計算機剪貼板，然后新的選項卡打開到lightpollutionmap.info。
加載該網站后，用戶將粘貼到輸入字段，站點將縮放到坐標。
目的是減少用戶查找其所在區域的光污染的麻煩。
我使用onclick=gotoLPM()進行調用。
gotoLPM()腳本放在<head>部分中。
我已經使用了jquery.copy-to-clipboard.js插件，它也在<head>部分。

問題：

我想通過外部jquery文件調用此按鈕 - 以保持js分開。
嘗試將<script src=>放在<head>和<body>部分中，但腳本不會執行。
該腳本應在PHP文件輸出/將按鈕呈現到其指定的<p>元素中並執行其余MySQL查詢后執行。
總之，我想使用DOM事件處理程序，而不是像我所做的那樣使用HTML。
我想我可能必須在PHP輸出后用jquery動態附加一個按鈕
有什么建議么？
注意：lightpollutionmap.info可能很慢....

PHP代碼：

echo "<h1>Dark Sky Preserves</h1>";

if (mysqli_num_rows($resultDarksky) > 0) {
    // Output of MySQL rows 
    while($row = mysqli_fetch_assoc($resultDarksky)) {
        echo $row["name"]. "<br>";
        echo "GPS coordinates: " . $row["latitude"] . ", " . $row["longitude"] . "<br/>";
        echo "Hectacres: " . $row["area"] . str_repeat('&nbsp;', 5) . " Bortle scale: " . $row["bortle"] ."<br/>";
        echo "<a href='".$row["link"]."' target='_blank'>". $row["link"] ."</a><br/>";
        echo $row["comment"]. "<br/>";
        echo "<br/>";

    // BUTTON for lightpollutionmap.info
    }
        echo "<br/>";
        echo "Check out the light pollution at your location. Click on your coordinates below and ";
        echo "then paste into the top-left input field in lightpollutionmap.info<br/>";
        echo "<button id='lightPollutionMapButton' onclick='gotoLPM()'>" .$q. "," .$r. "</button>";
        echo "<br/>";

}   // if no records match query - print 0 results
    // BUTTON for lightpollutionmap.info
    else {
        echo "No designated dark sky preserve nearby, but click on your coordinates below and ";
        echo "then paste into the top-left input field in ";
        echo "lightpollutionmap.info website for dark skies near you:<br/>";
        echo "<button id='lightPollutionMapButton' onclick='gotoLPM()'>" .$q. "," .$r. "</button>";
}

腳本文件（在HTML <head>部分內）：

function gotoLPM(){ $("#lightPollutionMapButton").CopyToClipboard(); window.open("https://www.lightpollutionmap.info", "_blank"); };

Answer 1

您可以使用javascript“defer”屬性來運行延遲腳本讀取DOM。 腳本或事件無法正常工作，因為腳本文件首先加載並嘗試在頁面加載完成之前讀取DOM。 這是怎么做到的

Move the 
<script src="filepath_to_your_js"></script>

from <head></head> section to the end of the body i.e right before the </body> tag. Also add the "defer" attribute to your script tag like below

<script src="filepath_to_your_js" defer></script>

Answer 2

更新：

<script> 'defer'參數不起作用。
“注入”HTML到<p id='astroStuff'>元素是一個位於遠程服務器上的PHP文件，通過AJAX，所以它不在DOM中。
根據蒂姆的建議，我制作了一個外部文件並將我的代碼放入“做某事”。

$(document).on('click', 'identifier', function () { // do something });

腳本正在運行

感謝蒂姆的小費！

在PHP文件將內容注入HTML文檔后，是否可以調用jquery腳本？

問題描述

2 個解決方案

解決方案1
0 2019-06-14 21:25:57

解決方案2
0 2019-06-15 21:47:52

在PHP文件將內容注入HTML文檔后，是否可以調用jquery腳本？

問題描述

2 個解決方案

解決方案1 0 2019-06-14 21:25:57

解決方案2 0 2019-06-15 21:47:52

解決方案1
0 2019-06-14 21:25:57

解決方案2
0 2019-06-15 21:47:52