在循环内处理 javascript 函数

Question

我在 while 循环中使用 javascript 函数。该循环打印记录列表和编辑按钮。当点击编辑按钮时有功能（比如说editBtnClicked（id））。 问题：它被调用到那里，但页面自动刷新。

我找不到的那边发生了什么事？有人看看这个。

function editBtnClicked(id) {
                console.log("Edit Section");
                $(".showData").css("display", "none");
                $(".showInputField").css("display", "block"); }

<button id="edit" name="Edit" value="Edit" class="edit btn btn-info"onclick="editBtnClicked('<%=id%>');">

Answer 1

请参考 PreventDefault :http://api.jquery.com/event.preventdefault/

  function editBtnClicked(e) {
            e.preventDefault();
            console.log("Edit Section");
            $(".showData").css("display", "none");
            $(".showInputField").css("display", "block"); 
  }

 <button id="edit" name="Edit" value="Edit" class="edit btn btn-info"onclick="editBtnClicked('<%=id%>');">

Answer 2

1- 将 preventDefault() 附加到单击事件或在函数末尾附加 return false 以防止提交。在第二种情况下你应该写 onclick="return editBtnClicked('<%=id%>')"

2- 不要将函数放在循环中。考虑在你的函数中使用 ID，这样你就不需要在循环中重复函数。

Answer 3

默认情况下，button elements 是 type="submit"。如果您不希望它成为提交按钮，请改用 type="button"：

<button type="button" id="edit" name="Edit" value="Edit" class="edit btn btn-info"onclick="editBtnClicked('<%=id%>');">

如果出于某种原因您希望它继续作为提交按钮，但又想阻止提交：在您的 onclick 属性中，将 event 传递到您的函数中：

<button id="edit" name="Edit" value="Edit" class="edit btn btn-info"onclick="editBtnClicked(event, '<%=id%>');">

event 将作为全局（Chrome、IE）或本地（Firefox）存在于为该调用创建的上下文中。

然后在您的处理程序中，使用 preventDefault:

function editBtnClicked(event, id) {
    $.Event(event).preventDefault(); // Note the jQuery event wrapper
    console.log("Edit Section");
    $(".showData").css("display", "none");
    $(".showInputField").css("display", "block");
}

就是说，我可能会完全改变它并使用 事件委托 而不是 onclick 属性。

在某些容器上，所有这些按钮将位于：

$("selector for the container").on("click", "button.edit", editBtnClicked);

...并且在输出它们时（注意我已经删除了 id——你说这是一个循环，你不能多次使用相同的 id！）：

<button type="button" type="button" value="Edit" class="edit btn btn-info" data-id="'<%=id%>'">

并且在函数中：

function editBtnClicked() {
    var id = $(this).attr("data-id"); // Get the ID
    console.log("Edit Section");
    $(".showData").css("display", "none");
    $(".showInputField").css("display", "block");
}

在循环内处理 javascript 函数

handle javascript function inside loop

javascript

javascript-events