0

I am trying to turn a password row into an input field when the 'change password' button is clicked. I am kind of halfway there already using Jquery. So I have made it so that when you click 'change password' the input field gets added. Also when they click 'back' the original state is shown. If you look on the codepen, you'll notice that after clicking 'back', you can't then click 'change password' again, the jquery doesn't work. Is there a solution to this?

Also I have used jquery 'replaceWidth', is there a better way to do this? I am putting a lot of html into my Jquery and not sure if that's the best way to do it.

Please take a look!

https://codepen.io/liamdthompson/pen/WYwXeK

$("#change").click(function () {
  $("#container").replaceWith('<input class="form-control" id="zing" required="required" type="text" value="Change password" id="website_name">');
  $(this).replaceWith('<button type="button" id="yeet" class="btn btn-light lighter">back</button>');


  $("#yeet").click(function () {
    $(this).replaceWith('<button type="button" id="change" class="btn btn-light lighter">Change password</button>');
    $("#zing").replaceWith('<div class="" id="container">*********</div>');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="accountmain" style="padding-top:25px;">
  <div class="row">
  </div>

  <div class="row">
      <div class="col">
          <h6> Password</h6>
      </div>
      <div class="col" id="container">
          *********
      </div>
  </div>

  <button type="button" id="change" class="btn btn-light lighter">Change password</button>
</div>
qiAlex
  • 4,290
  • 2
  • 19
  • 35
Liam Thompson
  • 23
  • 1
  • 7
  • 1
    Is there a reason you can't just create them in HTML and show/hide them when necessary? – Train Nov 08 '18 at 21:09
  • are there benefits to using show/hide rather than replaceWidth? – Liam Thompson Nov 08 '18 at 21:16
  • 1
    Obvious benefit: You don't lose the attached javascript handlers. – connexo Nov 08 '18 at 21:28
  • It's a much simpler approach instead of dynamically creating some elements through a string. All you have to do is call `.show()` or `.hide()`. You just show/hide with no complexity involved. – Train Nov 08 '18 at 21:29
  • Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) – Taplar Nov 08 '18 at 21:56

2 Answers2

2

This is because your #change on click event is bound to the dom element when the page loads.

To bind events to dynamically created elements, bind to the document using the .on feature, like this.

SpeedOfRound
  • 1,210
  • 11
  • 26
  • 3
    It's recommended to bind to the closest possible non-dynamic parent, for performance (and even, logical) reasons. Bind to `document`/`body` only if you don't have a choice. – Jeto Nov 08 '18 at 21:15
1

You have to re-attach the event listener again when you insert the button back in.

Otherwise another solution is to use the derived event on the parent class ie. 

$('body').on('click', '#change', function(){});

This will affect any element with Id change that has body in its line of ancestors.

ege
  • 774
  • 5
  • 19