Question

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

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

Answer 2

希望这会有所帮助

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

jsfiddle

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

2 个答案: