Динамическое изменение страницы меню Wordpress с помощью jquery

Question

Я пытаюсь динамически изменить страницу в меню Wordpress. То есть я не хочу менять само меню, а страницу, которая отображается в бэкэнде. Я использую jquery, чтобы добавить div после нажатия кнопки. Моя функция JavaScript выглядит так

$(document).ready(function(){
    $("#show").click(function(){
        $(".some_div").after("<div>I am added</div>").attr('class', 'some_class');      
    });
});

Нажатая кнопка отправляет форму и выглядит следующим образом

<input type="submit" name="show" id="show" value="Show Me" class="button-primary" />

Как только кнопка нажата, скрипт работает нормально, если кратко добавить div. Проблема в том, что страница также перезагружается и HTML-код «сбрасывается», так что добавленный div снова исчезает. Кто-нибудь знает обходной путь для этого?

Answer 1

Попробуйте

$(document).ready(function(){
    $("#show").click(function(e){
        e.preventDefault();
        $(".some_div").after("<div>I am added</div>").attr('class', 'some_class');      
    });
});

Answer 2

Вы можете запретить поведение кнопки формы по умолчанию с помощью protectDefault (), это будет работать так:

$(document).ready(function(){
    $("#myForm").submit(function(e){
        e.preventDefault();
        $(".some_div").after("<div>I am added</div>").attr('class', 'some_class');      
    });
});

См .: http://api.jquery.com/submit/