Change element id and behaviour on click

Question

I need to make a button that changes its id on click, and its name. It changes only when I click the first time on "Start!". After that it is not working and I don't know why.

$("#start").click(function(){
  $(this).attr("id", "stop");
  $(this).html("Stop!");
});

$("#stop").click(function(){
  $(this).attr("id", "start");
  $(this).html("Start!");
});

mplungjan · Answer 1 · 2015-07-06T12:35:15.473

4

Changing ID is not a good idea.

have a button and toggle the class and content

$("#toggle").on("click",function(){
  $(this).toggleClass("stop");
  $(this).html($(this).is(".stop")?"Stop":"Start"); // if ($(this).is(".stop")) {} else {} 
});

.stop { background-color:red }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="toggle">Start</button>

edited Jul 06 '15 at 12:35

answered Jul 06 '15 at 11:22

mplungjan

169,008
28
173
236

score 2 · Accepted Answer · answered Jul 06 '15 at 11:23

The $('#stop') selector can't works because you have no html element with the id stop when you run it. So you have 2 choices : Use only one listener or use the delegation system of jQuery.

One listener :

$('#start').click(function() {
    var $this = $(this),
        id = $this.attr('id');

    if (id == 'start') {
        $this.attr('id', 'stop');
        $this.html('Stop!');
    } else {
        $this.attr('id', 'start');
        $this.html('Start!');
    }
});

Delegation system :

$(document.body).on('click', "#start", function(){
  $(this).attr("id", "stop");
  $(this).html("Stop!");
});

$(document.body).on('click', "#stop", function(){
  $(this).attr("id", "start");
  $(this).html("Start!");
});

Anyway, mplungjan is right. Changing the ID is not a good idea. You should use a CSS class for that.

I agree - I am right :))) I doubt example 1 will work without the example 2 in place — mplungjan, Jul 06 '15 at 12:32

Change element id and behaviour on click

2 Answers2