Question

$(document).ready(function(){
    $('#playerForm .add-box').click(function(){
        addplayerList();
    });
});

function addplayerList(){
    $('.list-box').append('<p>second</p>');
}

我正在尝试创建一个函数，在按下add按钮后将创建一个新的HTML行。我不知道我做错了什么。我检查了代码，我相信它应该可以运行，但是在我点击add后，内容<p>second</p>会显示并立即消失。

Demo - 点击add

后出错

Answer 1

问题是因为button点击正在提交表单。您需要在preventDefault()处理程序中调用click()来停止此操作。

$('#playerForm .add-box').click(function (e) {
    e.preventDefault();
    addplayerList();
});

Example fiddle

或者，您可以修改HTML以将按钮的type从submit（默认设置）更改为普通按钮：

<button class="add-box" type="button">add</button>

Answer 2

除了点击导致您描述的错误的链接的默认行为外，小提琴似乎对我有用。

为避免点击后出现错误，您可以执行以下操作：

$(document).ready(function(){
    $('#playerForm .add-box').click(function(){
        addplayerList();
        return false;
    });
});

return false;会阻止点击的默认行为，也就是重定向到href属性。

https://jsfiddle.net/wmzoroag/4/

单击“不附加”后创建元素

2 个答案: