ручка javascript функция внутри цикла

Question

Я использую функцию javascript внутри цикла while. Этот цикл печатает список записей и кнопку редактирования. При нажатии кнопки редактирования есть функция (скажем, 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

От defualt, 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

Пожалуйста, используйте 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 3

1- прикрепить preventDefault() щелкнуть событие или вернуть ложь в конце функции для предотвращения подачи. Во втором случае вы должны написать onclick = "return editBtnClicked ('<% = id%>')"

2- Не помещайте свою функцию в цикл. Рассмотрите возможность использования идентификатора внутри вашей функции, поэтому вам не нужно повторять функцию внутри цикла.