jQuery - .append добавляет элемент html, затем автоматически удаляется html

Question

При использовании приведенного ниже кода для добавления элементов div и p внутри .container (с использованием значения в входах) элементы создаются и автоматически уничтожаются , Какие-нибудь идеи относительно того, что не так? Огромное спасибо!

$("#submit").on("click", function(event){ 
    var textTitle = $("#title").val(); 
    var textContent = $("#content").val(); 
    $("#title").val(""); 
    $("#content").val(""); 
    $(".container").append("<div class='panel panel-default'><h4>" + textTitle + "</h4></div>"); 
    $(".container").append("<div class='panel panel-default'><p>" + textContent + "</p></div>"); 
    event.stopPropagation(); 
}); 

Answer 1

Звучит так, как будто ваш #submit является типом ввода = "submit" и отправкой формы. Потому что ваш выше код работает отлично, если не в теге формы.

Также будьте осторожны при использовании .append(), поскольку он будет отставать от браузера. Его всегда лучше всего сформировать все ваши элементы DOM в строку HTML, а затем использовать функцию добавления один раз.

JS Fiddle: https://jsfiddle.net/vxxu3uhw/1/

$("#submit").on("click", function(event){ 
     event.preventDefault(); 
     var textTitle = $("#title").val(), 
      textContent = $("#content").val(); 

     $("#title").add("#content").val(""); 

     var html = "<div class='panel panel-default'><h4>" + textTitle + "</h4></div>" 
       + <div class='panel panel-default'><p>" + textContent + "</p></div> 

     $(".container").append(html); 
    }); 

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

Если вы используете форму и тип ввода = "отправить", то добавьте event.preventDefault(), и вы не отправите форму.

Answer 2

Использование event.preventDefault вместо event.stopPropogation, пусть это предотвратить работу по умолчанию формы представления.