CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
PDP
PDP

Reputation: 181

jquery events are not persistent

In the following code, I see my jquery replacing the click me away text to testing, but it quickly reverts it to the original text. could someone kindly tell what the issue is? Any help is appreciated.

 <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function(){
            $("#but").click(function(){
            $("p").text("testing");
            });
        });
        </script>
    </head>
    <body>
    <div class="container">
      <h2>Vertical (basic) form</h2>
      <form role="form">
        <div class="form-group">
          <label for="email">Email:</label>
          <input type="email" class="form-control" id="email" placeholder="Enter email">
        </div>
        <div class="form-group">
          <label for="pwd">Password:</label>
          <input type="password" class="form-control" id="pwd" placeholder="Enter password">
        </div>
        <div class="checkbox">
          <label><input type="checkbox"> Remember me</label>
        </div>
        <button id="but" type="submit" class="btn btn-default">Submit</button>

      </form>
    </div>
       <p>Click me away!</p>
    </body>
    </html>

Upvotes: 0

Views: 147

Answers (3)

Marcel Djaman
Marcel Djaman

Reputation: 1286

What you can do is:

$(document).ready(function(){
        $("#but").on('click', function(e){
            $("p").text("testing");
            e.preventDefault();
        });
    });

Better use event.preventDefault() instead of return false. And for last jquery version use on instead of click function.

Link about return false vs. event.preventDefault()

http://blog.nmsdvid.com/when-to-use-return-false-and-when-preventdefault/

http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/

Upvotes: 1

tommo holmes
tommo holmes

Reputation: 26

What you mean it's revert if you refresh your page, this text revert to your original text.If you want to not submit your page you can set return false please check my fiddle code (http://jsfiddle.net/tommoholmes/cea6dz35/)

Upvotes: 1

RooWM
RooWM

Reputation: 583

try 

.on('click', function(){
    $("p").text("testing");
});

Upvotes: 0

Related Questions