当我点击jquery按钮时，javascript函数会执行更多次

javascript function execute more times when i click with jquery button

本文关键字：函数 执行 javascript jquery 按钮      更新时间：2023-09-26

我试着用jQuery制作按钮，我调用了JavaScript函数，但我遇到了问题：

  1. 页面加载后，第一次点击mybutton没有反应
  2. 第二次单击将执行两次功能
  3. 第三次点击将执行功能三以及更多

为什么我的代码执行得更多？我只想要"一键执行JavaScript函数"我的代码像这个

<script type="text/javascript" language="javascript">
function showcase(){
    var foo = function () {
         alert('tutup');
    };
    $('#create-new').on('click',foo);
    return false;
}</script> <button class="button" id="create-new"onclick="return showcase();">show text</button>

请帮我解决这个问题

在这里尝试我的完整错误代码http://jsbin.com/ovucer/1/edit

您正在向元素注册多次单击事件侦听器

每次点击按钮时，都会使用showcase方法向按钮添加一个新的点击处理程序，这是不需要的

<button class="button" id="create-new">show text</button>
<script type="text/javascript" language="javascript">
    var foo = function () {
         alert('tutup');
    };
    $('#create-new').on('click',foo);
</script>

发生这种情况的原因是绑定了一个click事件，该事件调用showcase()函数，该函数还绑定了新的click事件，该调用foo()方法。每次单击按钮时都会重复上一次迭代。这是一种递归。

正确的方法是在元素加载后绑定一次点击事件：

<button class="button" id="create-new">show text</button>
<script type="text/javascript">
    $("#create-new").on("click", function() {
        alert("tutup");
    });
</script>

您正在onclick，中注册一个onclick函数

使用这个：

$('#create-new').on('click', function(){ alert('text button'); return false; });

您要绑定两次click事件。在HTML上使用onclick，然后再次使用jQuery .on()。

为了让你的生活更轻松，而且你已经在使用jQuery了，只需在文档准备活动中进行即可：

var foo = function () {
  alert('text button');
  return false;
};
$(function () {
  $('#create-new').on('click',foo);
});

通过删除onclick:来修复您的HTML位

<button class="button" id="create-new">show text</button>

在脚本标记中尝试此操作，然后删除按钮中的the onclick event：

var foo = function () {
    alert('tutup');
};
$('#create-new').on('click',foo);
return false;
相关文章：