Create element after click on doesn't append

Question

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

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

I am trying to make a function which will create a new line of HTML after I press the add button. I have no idea what I did wrong. I checked the code and I believe it should work but some how after I click on add the content <p>second</p> shows and disappears right away.

Demo - it has an error after I click add

Any specific reason for using post method? If none, then you can change method="post" to method="get" — John R
– John R, Commented Oct 28, 2015 at 10:19

Rory McCrossan · Accepted Answer · 2015-10-28 10:08:53Z

1

The issue is because the button click is submitting the form. You need to call preventDefault() in the click() handler to stop this.

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

Example fiddle

Alternatively you can just amend your HTML to change the type of the button from a submit (which is the default) just to a plain button:

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

answered Oct 28, 2015 at 10:08

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3233074 Over a year ago

thank i didt know it somehow make the button to submit that form , thank friend.

martincarlin87 · Accepted Answer · 2015-10-28 10:12:18Z

1

The fiddle seems to work fine for me apart from the default behaviour of clicking the link causing the error you describe to show.

To avoid the error after click, you can do this:

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

The return false; prevents the default behaviour of the click, which is to redirect to the href attribute.

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

answered Oct 28, 2015 at 10:12

martincarlin87

11.1k24 gold badges104 silver badges148 bronze badges

Collectives™ on Stack Overflow

Create element after click on doesn't append

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related