Jquery 将标记表单添加到代码后未成功预览_Jquery_Html_Css

Jquery 将标记表单添加到代码后未成功预览

jquery html css

Jquery 将标记表单添加到代码后未成功预览,jquery,html,css,Jquery,Html,Css,我是用户，此代码已成功运行 <body> <p class="c1">this is test text</p> <br/> <input type="submit" id="btn" value="Click"/> </body> 和js $(function () { $('#btn').click(function () { var newC

我是用户，此代码已成功运行

<body>
        <p class="c1">this  is  test text</p>
        <br/>
        <input type="submit" id="btn" value="Click"/>
</body>

和js

$(function () {
    $('#btn').click(function () {
        var newClass = 'c2';
        $('p')
                .removeAttr('class')
                .addClass(newClass);
    });
});

代码运行成功

但在向代码添加表单标记后，预览未成功

 <body>
        <form action="" method="post"> 
            <p class="c1">this  is  test text</p>
            <br/>
            <input type="submit" id="btn" value="Click"/>
        </form>
    </body>


这是测试文本

您需要在事件上调用

preventDefault（）

，以防止

表单提交：
$(function () {
    $('#btn').click(function (e) {
        e.preventDefault();
        var newClass = 'c2';
        $('p')
                .removeAttr('class')
                .addClass(newClass);
    });
});

添加事件后的内容可防止单击后默认不起作用
$(function () {
    $('#btn').click(function (e) {
        e.preventDefault();
        var newClass = 'c2';
        $('p')
                .removeAttr('class')
                .addClass(newClass);
    });
});