Question

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

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

和css

.c1{
    font-size:14px;
    font-weight: bolder;
    color: red;
}

.c2{
    font-size:10px;
    color:blueviolet;
}

和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>

link 1

link 2

Answer 1

您需要在活动上致电preventDefault()以阻止form提交：

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

FIDDLE

添加标签表单后代码不成功预览

1 个答案: