时间戳

首页 > 解决方案 > 使用 Javascript 的 Onclick

javascript - 使用 Javascript 的 Onclick

问题描述

我一直在尝试从单独的脚本中实现 JS 调用，尽管引用了 m,ultiple 演示，但我无法让我的示例正常工作。

有人可以帮我解决这个简单的例子吗？

tescript.php 说

<!DOCTYPE HTML>
<!-- Load checkout JS -->
<script type="text/javascript" src="tscript.js"></script>

<div class="col-md-3 col-sm-4 col-xs-12 imageUploadSide">
    <ul>
    <li> <button id="buyingPhoto" class="btn btn-buy">A New Buyit Button</button>   
   </li>
   </ul>
 </div>

然后脚本文件说

// checking script load & log
console.log("script file has been loaded")

$('#buyingPhoto').on('click', function() {
console.log("Can a button be depressed?")
});

我得到一个脚本已加载的控制台日志（故障排除步骤 1），但 onclick 本身没有运行

标签： javascriptjqueryajax

解决方案

您缺少导入 jQuery 库。$()是 jQuery 使用的。并注意图书馆的顺序。并确保页面也已加载。所以你应该使用document.ready.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="tscript.js"></script>


console.log("script file has been loaded")

$( document ).ready(function() {
    $('#buyingPhoto').on('click', function() {
   			 console.log("Can a button be depressed?")
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-3 col-sm-4 col-xs-12 imageUploadSide">
    <ul>
    <li> <button id="buyingPhoto" class="btn btn-buy">A New Buyit Button</button>   
   </li>
   </ul>
 </div>

没有jQuery

document.getElementById("buyingPhoto").onclick = function() {
console.log("Can a button be depressed?")

};
<div class="col-md-3 col-sm-4 col-xs-12 imageUploadSide">
    <ul>
    <li> <button id="buyingPhoto" class="btn btn-buy">A New Buyit Button</button>   
   </li>
   </ul>
 </div>

或者你可以在 html 中点击

function test(){

console.log("Can a button be depressed?")

}
<div class="col-md-3 col-sm-4 col-xs-12 imageUploadSide">
    <ul>
    <li> <button onclick="test()" id="buyingPhoto" class="btn btn-buy">A New Buyit Button</button>   
   </li>
   </ul>
 </div>

推荐阅读