Почему событие JavaScript обновляет страницу

Question

Так у меня есть этот код, чтобы сделать поиск с помощью RegExp, он проходит через массив строк и ищет пользовательский ввод:

Clinica.prototype.pesquisarDoente = function() 
{ 
    var exp = document.getElementById("pesquisaInput").value; 
    var lista = document.getElementById("listaDoentes"); 
    if (exp) 
    { 
     while (lista.firstChild) 
     lista.removeChild(lista.firstChild); 
     var patt = new RegExp(exp); 
     var lenght = this.doentes.length 
     for (i = 0; i < lenght; i++) 
     { 
      if (patt.test(this.doentes[i].nome)) 
      { 
       var option = document.createElement("option"); 
       option.appendChild(document.createTextNode(this.doentes[i].toString())); 

       lista.appendChild(option); 

      } 
     } 
    } 

} 

, а затем я называю это событие:

var buttonPesquisa = document.createElement("input"); 
    buttonPesquisa.type = "submit"; 
    buttonPesquisa.value = "Pesquisar"; 
    buttonPesquisa.addEventListener('click', function() { cl.pesquisarDoente(this); }); 

, который затем присоединяется к моей странице. проблема в том, что когда я нажимаю кнопку, она очищает список выбора, а затем обновляет страницу. почему это ??

Answer 1

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

Вы должны preventDefault() на мероприятии.

Попробуйте это:

var buttonPesquisa = document.createElement("input"); 
    buttonPesquisa.type = "submit"; 
    buttonPesquisa.value = "Pesquisar"; 
    buttonPesquisa.addEventListener('click', function (e) { e.preventDefault(); cl.pesquisarDoente(this); }); 

Answer 2

Отправить кнопки представить формы.

Отправка формы будет отправлять данные формы в URI, указанный в действии (или текущий URI, если нет действия), и загрузить ответ в качестве новой страницы.

Answer 3

Изменить тип кнопку 'кнопку':

var buttonPesquisa = document.createElement("input"); 
    buttonPesquisa.type = "button"; 
    buttonPesquisa.value = "Pesquisar"; 
    buttonPesquisa.addEventListener('click', function() { cl.pesquisarDoente(this); }); 

Answer 4

Просто используйте

var buttonPesquisa = document.createElement("button"); 
buttonPesquisa.type = "button"; 
// rest of code 

И он не должен обновить страницу.