jquery перезагружает страницу при нажатии кнопки

Question

У меня есть маршрут get, который возвращает представление с данными, вид имеет форму (я использую html-пакет LaravelColletive), эта форма имеет кнопку , которая не отправьте один, эта кнопка имеет событие щелчка, вызванное jQuery, что он делает, так это то, что он добавляет некоторые элементы в представление.

Проблема, с которой я столкнулась, заключается в том, что при нажатии кнопки она перезагружает страницу, действие выполняется, но из-за перезагрузки форма страницы снова не имеет значения.

Вот действие JQuery

$("#completarseleccion").click(function(){ 
    var btn_element = $(this); 
    //this is how you loop through your item and add it to a specific element 
    $(".opcion").each(function(){ 
     if($(this).hasClass("clicked")){ 
      $($(this).html()).append('#menuseleccionado'); 
     } 
    }); 
}); 

На самом деле, если кнопка не имеет каких-либо действий, если я нажимаю, он перезагружает страницу ...

Мое приложение под Laravel 5.0 Как я мог решить что?

Answer 1

Я принимаю догадку здесь - Ваша кнопка отправить находится внутри тега form. В этом случае у вас есть варианты:

1. Закройте <form> тег перед кнопкой
2. Если это можно сделать, либо return false из обработчика события нажатия или использовать объект события, чтобы сказать e.preventDefault();

Однако в случае 2, если вы хотите отправить форму на более позднем этапе, вам нужно будет сделать это программно, вызвав функцию .submit() на объект формы.

Answer 2

Добавить event к аргументам функции мыши, а затем в верхней части функции обратного вызова использовать event.preventDefault();

$("#completarseleccion").click(function(event){ 
    event.preventDefault(); 
    var btn_element = $(this); 
    //this is how you loop through your item and add it to a specific element 
    $(".opcion").each(function(){ 
     if($(this).hasClass("clicked")){ 
      $($(this).html()).append('#menuseleccionado'); 
     } 
    }); 
}); 

Answer 3

$("#completarseleccion").click(function(e){ 
    e.preventDefault(); 
    var btn_element = $(this); 
    //this is how you loop through your item and add it to a specific element 
    $(".opcion").each(function() 
    { 
if($(this).hasClass("clicked")) 
$($(this).html()).append('#menuseleccionado'); } }); });