Question

我尝试使用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>

请帮我解决这个问题

在此处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()事件。每次单击按钮时都会重复上一次迭代。这是一种在这里工作的递归。

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

<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

您将点击事件绑定两次。在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>

Answer 5

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

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

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

5 个答案: