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

默认情况下，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");
}

Answer 2

1-将preventDefault（）附加到click事件或在函数末尾返回false以防止提交。在第二种情况下，你应该写onclick =＆＃34;返回editBtnClicked（＆＃39;＆lt;％= id％＆gt;＆＃39;）＆＃34;

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

Answer 3

请使用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%>');">

在循环中处理javascript函数

3 个答案: