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

Question

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

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

为什么我的代码执行更多？我只想要“ 1 click 1 execution JavaScript function ”我这样的代码

<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

Answer 1

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

每次单击按钮时，您都在使用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>

Answer 2

发生这种情况是因为您绑定了一个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>

Answer 3

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

用这个：

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

Answer 4

您绑定了两次点击事件。onclick在 HTML 上反复使用，使用jQuery.on()。

为了让您的生活更轻松，并且您已经在使用 jQuery，只需在文档就绪事件中执行此操作：

var foo = function () {
  alert('text button');

  return false;
};

$(function () {
  $('#create-new').on('click',foo);
});

并通过删除以下内容来修复您的 HTML 位onclick：

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

Answer 5

在您的脚本标签中尝试此操作并the onclick event在按钮中删除：

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