第一次单击时未触发功能答案

【问题标题】：Function not firing on first click第一次单击时未触发功能
【发布时间】：2015-07-08 16:05:29
【问题描述】：

我有一个按钮，点击时有 2 个功能。这是我的按钮：

<button id="btnNext" onclick="increment(); Next();">Next</button>

increment() 函数在第一次单击时按预期工作，但 Next() 函数却没有。第一次单击后它确实按预期工作。如果我删除 increment() 函数，Next() 函数将在第一次单击时起作用。我尝试过组合这些功能，但它给了我相同的结果。

Next() 函数移动到下一个窗体，increment() 函数将滚动条滑块移动到所需位置。

这是我的功能：

var Next = function () {
    UserVM.Model.MoveCurrentToNext();  
}

var increment = function () {
    if (lastScroll < 240) {
        lastScroll += 40;
    }
    scrollpos.scrollTop = lastScroll;
}

有人知道这是什么原因吗？

更新：我在 Next() 函数中添加了一个警报。现在，当我触发按钮时，它会在弹出警报框时显示下一个表单，但是当我单击确定时，它会返回到上一个表单。这只发生在我第一次单击按钮时。这有什么原因吗？有办法解决吗？

【问题讨论】：

创建一个事件处理程序并从那里调用这两个函数不是更容易吗？
你试过onclick="Next()"然后尝试从Next函数调用increment吗？
increment() 没有进行防御性编码。如果 lastScroll 或 scrollpos 未定义，它将失败。
我感觉这是代码的时间问题。
旁注：将内联处理程序与 jQuery 一起使用通常不利于维护。它将 事件注册 与 事件处理程序 分开（也失去了 jQuery 添加的功能）。如果您使用 jQuery 注册事件，您的代码通常会更简单且更易于维护。这个错误很可能会消失。

标签： javascript jquery html

【解决方案1】：

我不知道你为什么对一个 onclick 单元使用两个单独的函数，因为如果你想同时执行这两个操作，为什么不在同一个函数中调用表单重定向代码。

var increment = function ()
{
    if (lastScroll < 240)
    {
        lastScroll += 40;
    }
    scrollpos.scrollTop = lastScroll;
    //form navigation
    UserVM.Model.MoveCurrentToNext();
}

HTML

<button id="btnNext" onclick="increment();">Next</button>

【讨论】：

我最初是这样做的，但我认为这可能是导致问题的原因。不管怎样，我觉得可以在 onclick 中调用两个函数很酷。另外，我不确定是否要在其他任何地方使用增量功能。我把它改回原来的样子。

【解决方案2】：

你可以试试这个：

var Next = function () {
alert("This is Next Function");  
}

var increment = function () {
    alert("This is Increment Function");
    Next();
}

&lt;button id="btnNext" onclick="increment()"&gt;Next&lt;/button&gt;

【讨论】：

【解决方案3】：

我觉得这是一个时间问题。添加轻微延迟以更改滚动位置。（只是有根据的猜测）；

var Next = function () {
    window.setTimeout(UserVM.Model.MoveCurrentToNext, 100);  
}

var increment = function () {
    if (lastScroll < 240) {
        lastScroll += 40;
    }
    scrollpos.scrollTop = lastScroll;
}

【讨论】：

不错的猜测。我试过了，但没有用。我写了一个更新。请检查一下，如果您知道问题所在，请告诉我。谢谢

【解决方案4】：

删除onclick attr并将其放入您的代码js中：

$(document).ready(function(){
  $(document).on("click","#btnNext",function(){
    Next();
    increment(); 
  });
});

【讨论】：

【解决方案5】：

所有提供的答案都有效，但我认为这个更接近您的需要（不使用其他 JS 库也不使函数依赖于其他函数）

&lt;button id="btnNext" onclick="(function(){increment();setTimeout(next, 100)})()"&gt;Next&lt;/button&gt;

请注意，此解决方案是将 increment() 和 newxt() 函数的调用包装在另一个匿名函数中。

【讨论】：

【解决方案6】：

我觉得自己很笨。我想通了，应该早就想通了。我在另一个函数中有变量lastScroll，所以我只需将其更改为变量位置-var position = 0;。现在它起作用了。很抱歉浪费了大家的时间。我会留下这个问题，以防您的任何答案对其他人有所帮助。

【讨论】：