Dlaczego moje okno dialogowe jQuery ponownie wczytuje stronę po naciśnięciu klawisza Enter?

Question

Próbuję użyć okna dialogowego jQuery do wprowadzenia danych na mojej stronie. Z jakiegoś powodu nie rozumiem, kiedy użytkownik wchodzi, cała strona jest odświeżana. Nawet nie sprawdza poprawności zawartości pola tekstowego.

I've create a jsfiddle, które pokazują problem. Sprawdziłem the documentation here i mój kod wydaje się postępować zgodnie z wytycznymi, ale muszę czegoś przegapić!

Oto jak nazywam dialogowe

$("#create-subtitle") 
    .click(function() { 
    $("#dialog-form-subtitles").dialog("open"); 
    return false; 
}); 

Oto jeden z mojego okna:

$("#dialog-form-steptitles").dialog({ 
     autoOpen: false, 
     height: 220, 
     width: 450, 
     modal: true, 
     buttons: { 
      "Ajouter un sous-titre pour les étapes": function() { 
       var bValid = true; 
       allFieldsStepTitle.removeClass("ui-state-error"); 
       bValid = bValid && checkLength(nameStepTitle, "sous-titre pour les étapes", 3, 50); 

       if (bValid) { 
        var $parent = $("#StepTitles"); 
        var numElem = $parent.find("tr").length; 
        $('#StepTitles > tbody:last').append('<tr><td><input class="text-box single-line" id="StepTitles_' + numElem + '__Name" name="StepTitles[' + numElem + '].Name" type="text" value="' + nameStepTitle.val() + '" /></td><td>&nbsp;<ul id="ListStep' + numElem + '"></ul></td><td><button id="create-step' + numElem + '" name="create-step' + numElem + '" class="btn btn-success">Ajouter une étape</button></td></tr>'); 
        $(this).dialog("close"); 
       } 
      }, 
      Cancel: function() { 
       $(this).dialog("close"); 
      } 
     }, 
     close: function() { 
      allFieldsStepTitle.val("").removeClass("ui-state-error"); 
     } 
    }); 

Ktoś może mi w tym pomóc?

Answer 1

Na stronie dokumentacji jQuery przykład nie ma znacznika form, dlatego działa zgodnie z oczekiwaniami. Sprawdź swój kod bez formularza here. Jeśli potrzebujesz tagu, sprawdź pytanie: this SO.

Answer 2

Uderzenie enter w środku form>input powoduje przesłanie formularza, co powoduje odświeżenie strony. Jest kilka rzeczy, które możesz zrobić, ale większość z nich polega na zapobieganiu domyślnej akcji przesyłania w formularzu. Kod jest głównie w języku francuskim, więc musiałem ciężko nawigacji, ale w celu wzmocnienia odświeżanie, po prostu to zrobić:

$('form').on('submit', function(event){ 
    event.preventDefault(); 
}); 

Stamtąd będziesz prawdopodobnie chcesz coś zrobić z wejść klucz - wywołać kliknięcie przycisku - ponownie tekst jest w języku francuskim, więc nie wiem, co mówi.

$('your-input').keypress(function(event) { 
    if(event.which == 13) { // 13 is the 'Enter' key 
    // do something here 
    } 
}); 

nadzieję, że pomoże.