CODEWITHSUNDEEP
javascripthtml
Enrison Hilario
Enrison Hilario

Reputation: 13

HTML button changes into another button when clicked on the same div

your help is really appreciated :)

I have my project in HTML and javascript and i need to create a button that once clicked, it will be replaced by another button and the button appeared will also be replaced by the previous button once it was clicked.

here is my javascript code and HTML.

<html>
<body>
    <div id="container">
        <button id="create">create</button>
    </div>
    <script>
        $('#create').click(function() {
            $('#container').html('<button id="again">again</button><button id="cancel">cancel</button>');
        });

        $('#again').click(function() {
            $('#container').html('<div><button id="create">create</button></div>');
        });

        $('#cancel').click(function() {
            $('#container').html('<div id="cancel">cancel</div>');
        });
    </script>
</body>
</html>

or try this link instead: http://codepen.io/enrison09/pen/hwlBA

thank you alot in advance! :)

Upvotes: 1

Views: 1665

Answers (3)

Sergio Marina
Sergio Marina

Reputation: 68

What about hiding and showing them instead of removing and creating?

<div id="container">
    <button style="display:none" id="again">again</button>
    <button id="create">create</button>
</div>
<script>
    $("#create").click(function () {
        if($('#create').html()=='create'){
            $('#again').show();
            $(this).html('cancel')
        }
        else{
            $('#again').hide();
            $(this).html("create");
        }        
    });
</script>

http://jsfiddle.net/8at2nbx7/

Upvotes: 1

fmoutawe
fmoutawe

Reputation: 105

You can use a structure like this : 

var $create = $('<button id="create">create</button>');
var $again = $('<button id="again">again</button>');
var $cancel = $('<button id="cancel">cancel</button>');

$('body').on('click', '#create', function() {
  $(this).remove();
  $('#container').append($again).append($cancel);
});

$('body').on('click', '#again', function() {
  var $parent = $(this).parent();
  $parent.find('button').remove();
  $parent.append($create);
});

$('body').on('click', '#cancel', function() {
  var $parent = $(this).parent();
  $parent.find('button').remove();
  $parent.append($cancel);
});

The on function replace live into jQuery v1.7+ : http://api.jquery.com/on.

Create button at the top of the process reduce memory cost and DOM work.

Upvotes: 0

Shomz
Shomz

Reputation: 37701

The problem with your code is that the click function only sets the event handlers to what DOM elements are available at the moment it is called. This means you won't be able to use it for anything that is added to the DOM afterwards.

The solution is to use the on() function instead, like this: 

$(document).on('click', '#create', function() {
  $('#container').html('<button id="again">again</button><button id="cancel">cancel</button>');
});

$(document).on('click', '#again', function() {
  $('#container').html('<div><button id="create">create</button></div>');
});

$(document).on('click', '#cancel', function() {
  $('#container').html('<div id="cancel">cancel</div>');
});

on() works with elements that are dynamically added to the DOM.

See your example here: http://codepen.io/anon/pen/rLjki

However, there are nicer ways to do this (like having all the needed buttons in the DOM the whole time, and just toggling which are visible and which are not at what stage).

Upvotes: 1

Related Questions