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

我尝试使用jQuery生成按钮，调用JavaScript函数，但遇到问题：

页面加载后，第一次点击mybutton没有反应

第二次单击将执行函数两次

第三次单击将执行功能三 还有更多

为什么我的代码执行更多？我只想“1单击1执行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>

函数showcase（）{
var foo=函数（）{
警惕（‘tutup’）；
};
$（“#新建”）。在（'click'，foo）上；
返回false；
}显示文本

请帮我解决这个问题

---

对于在此处尝试我的完整错误代码

发生这种情况是因为绑定了一个

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>

显示文本
$（“#创建新”）。在（“单击”，函数（）上）{
警惕（“图普”）；
});

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

每次单击按钮时，您都会使用

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>

显示文本
var foo=函数（）{
警惕（‘tutup’）；
};
$（“#新建”）。在（'click'，foo）上；

您正在onclick中注册onclick函数

使用以下命令：

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

---

您正在绑定单击事件两次。在HTML上使用

onclick

，然后再次使用jQuery

.on（）

为了让您的生活更轻松，而且您已经在使用jQuery，只需在document ready事件时执行此操作：

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>

显示文本

在脚本标记中尝试此操作，并删除按钮中的onclick事件：

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

---

谢谢大家。。我得到了答案。。。非常有用。谢谢。案件结案如何告诉我们正确答案^^