如何将代码从 JsFiddle 放到网站上？答案

【问题标题】：How to place code from JsFiddle to a website?如何将代码从 JsFiddle 放到网站上？
【发布时间】：2015-10-09 18:33:55
【问题描述】：

我在 JsFiddle 上有一个代码，但似乎无法以 HTML 和 JavaScript 格式将其放入我的网站。我将 CSS 放入我的 CSS 文件中，该文件可以正常工作并放置 HTML，并且也可以正常工作，但我似乎无法触发 JavaScript 工作。有人可以帮助并指出正确的方向吗？谢谢。

<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title>$MODULE_NAME$ - $SITE_NAME$</title>
        <?$META_DESCRIPTION$?>
        <?$META_KEYWORDS$?>
        <link type="text/css" rel="StyleSheet" href="/_st/my.css" />
        <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js"></script>
        <script src="http://joxongir.ucoz.com/cardgame.js"></script>
    </head>
    <body>
        <input type="button" value="Deal Card" id="deal" />
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <div id='drop' class='drop'>Drop Here</div>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        $GLOBAL_BFOOTER$
</html>
</table>
</body>

JsFiddle 文件： http://jsfiddle.net/otpspbhs/5/

我试图让它工作的页面是 joxongir.ucoz.com/stuff

编辑：这是我到目前为止的代码，我已经改变了

<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title>$MODULE_NAME$ - $SITE_NAME$</title>
        <?$META_DESCRIPTION$?>
        <?$META_KEYWORDS$?>
        <link type="text/css" rel="StyleSheet" href="/_st/my.css" />
        <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js"></script>
        <script src="//code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>
    </head>
    <body>
        <input type="button" value="Deal Card" id="deal" />
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <div id='drop' class='drop'>Drop Here</div>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        $GLOBAL_BFOOTER$
<script src="http://joxongir.ucoz.com/cardgame.js"></script>
</html>
</table>
</body>

【问题讨论】：

你有嵌入版本。只需点击jsfiddle网站上的分享按钮

标签： javascript jquery html css

【解决方案1】：

您的脚本资源：

<script src="http://joxongir.ucoz.com/cardgame.js"></script>

必须在页面完全加载后加载。您可以通过使用 jQuery 的页面就绪处理程序或将脚本选项卡放在结束正文标记之前来完成此操作。

为了解释问题细节，当您的外部 JavaScript 脚本的第 1 行运行时，HTML DOM 元素 id="deal" 尚不存在，因为浏览器尚未通过 HTML 解析。在元素存在之前，使用 $('#deal).click(... 附加事件不会执行任何操作。

次要问题：

你还没有加载 jQuery UI，在你的头上添加这个标签来启用 UI 功能：

<script src="//code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>

【讨论】：

好的，我把js脚本放到里面还是不行
它必须是正文中的最后一个标签。
所以我应该把

Drop Here
放入js文件？我确实把它作为最后一个标签，但它仍然不起作用
没有。只需将引用cardgame.js 的脚本标记从文件头移动到文件末尾附近，就在结束正文标记之前。 JavaScript 必须在 HTML 元素加载后执行。
好的，所以我这样做了

放在这里

$GLOBAL_BFOOTER$

【解决方案2】：

希望这会有所帮助

<div>
  <a href="http://jsfiddle.net/otpspbhs/5" target="_blank"> 
      <button id="navLink">Take to Link</button>
    </a>
</div>

jsfiddle

【讨论】：