Button disappears on click

Question

I have a very simple HTML file (it's part of an MVC 4 project but i also tested on a plain HTML file) that contains two buttons and some jquery script:

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
    <div>
        <button id="btn1">Get a string</button>
        <br />
        <p id="p1" style="font-size: 12px" />
        <br />
        <button id="btn2">Get user agent</button>
        <br />
        <p id="p2" style="font-size: 12px" />
    <br />
</div>
<script>
    $(function () {
        $('#btn1').click(function () {
            $('#p1').text('clicked');
        });
    });
</script>
<script>
    $(function () {
        $('#btn2').click(function () {
            $('#p2').text(navigator.userAgent);
        });
    });
</script>
</body>

after clicking the second button everything works great, but when clicking the first button (btn1) the second one disappears. I tried switching them and changing the implementation of the script:

<script>
    $(function () {
        $('#btn1').click(function () {
            $('#p1').text('clicked');
        });
    });
    $(function () {

        $('#btn2').click(function () {
            $('#p2').text(navigator.userAgent);
        });
    });
</script>

and:

<script>
    $(document).ready(function () {
        $('#btn1').click(function () {
                $('#p1').text('clicked');
        });
    });
    $(document).ready(function () {
        $('#btn2').click(function () {
            $('#p2').text(navigator.userAgent);
        });
    });
</script>

but nothing change.
any ideas on how to solve it?

You're missing `e.preventDefault()` in those click functions. paragraphs are not self closing (and can only contain inline elements), and you only need one DOM ready function — adeneo, Jan 15 '13 at 10:51

score 1 · Answer 1 · answered Jan 15 '13 at 10:51

You have to use a closing  tag. A self-closing tag won't work:

<button id="btn1">Get a string</button>
<br />
<p id="p1" style="font-size: 12px"></p>  <-- here
<br />
<button id="btn2">Get user agent</button>
<br />
<p id="p2" style="font-size: 12px"></p> <-- and here

score 1 · Answer 2 · answered Jan 15 '13 at 10:52

use this: http://jsbin.com/eqawas/1/edit

<div>
    <button id="btn1">Get a string</button>
    <br />
  <p id="p1" style="font-size: 12px"></p>
    <br />
    <button id="btn2">Get user agent</button>
    <br />
    <p id="p2" style="font-size: 12px" ></p>
</div>

score 1 · Accepted Answer · answered Jan 15 '13 at 10:52

1

The problem is that you did not close your  tags properly. You did  but it needs to be formatted like this .

See: http://codepen.io/AlienHoboken/pen/kinGq

answered Jan 15 '13 at 10:52

AlienHoboken

2,750
20
23

score 0 · Answer 4 · answered Jan 15 '13 at 10:50

default behaviour of "button" tag is submit. so you need to specify type="button" with like

<button id="btn1" type="button">Get a string</button>

and code onlod should be like

$(function () {
    $('#btn1').click(function () {
        $('#p1').text('clicked');
    });
    $('#btn2').click(function () {
        $('#p2').text(navigator.userAgent);
    });
});

Button disappears on click

4 Answers4

Linked