功能在第一次点击时不会触发

Question

我有一个按钮，需要两个功能点击。这是我的按钮：

<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（）函数添加了一个警报。现在，当我触发按钮时，它会在弹出警告框时显示下一个表单，但是当我单击“确定”时，它将返回到上一个表单。这只在我第一次点击按钮时发生。有什么理由吗？无论如何要解决它？

Answer 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>

Answer 2

你可以试试这个：

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

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

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

Answer 3

我觉得这是一个时间问题。添加一点延迟以使滚动位置发生变化。 （只是一个有根据的猜测）;

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

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

Answer 4

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

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

Answer 5

所有提供的答案工作，但我认为这一个更接近你需要的（没有使用其他JS库既不使功能依赖他人）

<button id="btnNext" onclick="(function(){increment();setTimeout(next, 100)})()">Next</button>

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

Answer 6

我感到愚蠢。我想通了，应该早点弄明白了。我在另一个函数中有变量lastScroll，所以我只是将它改为变量位置 - var position = 0;。现在它有效。很抱歉浪费每个人的时间。我会留下这个问题，以防你的任何答案帮助其他人。