[英]Add onclick event via JavaScript
我的网页中有以下几行代码：
<button type="button" data-role="none" class="slick-prev" aria-label="previous" style="display: block;">Previous</button>
<button type="button" data-role="none" class="slick-next" aria-label="next" style="display: block;">Next</button>
上一个和下一个按钮通过许多外部文件 - slick放置在网页中，这些文件存储在另一台服务器上并包含在<head>标签中。
当用户单击它们时，我需要在每个按钮上放置两个单独的计数器。
由于我无法修改外部 JavaScript 文件，如何将以下代码添加到将执行计数器的任一按钮中？
onclick="myCounter()"
onclick="myCounterTwo()"
然后按钮应该像这样：
<button type="button" data-role="none" class="slick-prev" aria-label="previous" style="display: block;" onclick="myCounter()">Previous</button>
<button type="button" data-role="none" class="slick-next" aria-label="next" style="display: block;" onclick="myCounterTwo()">Next</button>
我假设您可以使用 jQuery，因为它是您的标签之一：
你有充分的理由使用 onclick 属性吗？
使用函数on() (jQuery) 绑定事件会更好
前任 ：
$(document).on('click', '.slick-next', myCounterTwo)
如果你不能编辑你的 JS 文件（如果你必须使用 HTML，这很奇怪......）你仍然可以在你的按钮后面添加一个脚本标签......它很难看但比使用 onclick 属性要少。
您可以在HTML 中执行此操作，例如：
<button type="button" data-role="none" class="slick-prev" aria-label="previous"
style="display: block;" onclick="myCounter()">Previous</button>
<button type="button" data-role="none" class="slick-next" aria-label="next"
style="display: block;" onclick="myCounterTwo()">Next</button>
或者在jQuery 中，例如：
$(".slick-prev").click(function () {
myCounter();
});
$(".slick-next").click(function () {
myCounterTwo();
});
在JavaScript 中，例如：
document.getElementsByClassName(".slick-prev")[0].click = myCounter;
document.getElementsByClassName(".slick-next")[0].click = myCounterTwo;
或者通过在JavaScript 中委托：
document.getElementsByClassName(".slick-prev")[0].addEventListener("click", myCounter, false);
document.getElementsByClassName(".slick-next")[0].addEventListener("click", myCounterTwo, false);
您可以使用可能的方法。
我认为你在 jQuery 环境中。 所以你给点击事件添加了一个自定义绑定！
如果您无法更改其他 js 文件，您可以将此作为单独的脚本块添加到您的标记中（即在您的按钮之后）。
<script>
$('.slick-prev').on('click', myCounter);
function myCounter() {
// your code
}
</script>
$(document).ready(function(){
$('#my-id').slick({
prevArrow: '<button type="button" data-role="none" class="slick-prev" aria-label="previous" onclick="prevCall()">Previous</button>',
nextArrow: '<button type="button" data-role="none" class="slick-next" aria-label="next" onclick="nextCall()">Next</button>',
});
});
如何通过JavaScript动态添加HTML代码中的onclick事件？
[英]How to add onclick event in dynamicly add html code via JavaScript?
如何在 Javascript 中为 onclick PopUp 添加事件监听器？
[英]How to add event Listener for onclick PopUp In Javascript?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.