Change id with jquery: Why doesn't it work?

Question

I use this code to change id to an <input type="button" id="avvia_timer" value="AVVIA" />:

$("#avvia_timer").click(function() {
    $(this).val("INIZIA");
    $(this).attr("id", "inizia_timer");
});

I changed id with $(this).attr("id", "inizia_timer"); Then I want to show 'id' with an alert but doing click on the element with the new id

$("#inizia_timer").click(function() {
    alert($(this).attr("id"));
});

this doesn't work. Why? How can I fix?

Html code:

<div id="timer">
    <input type="button" id="avvia_timer" value="AVVIA" />
    <input type="button" id="stop_timer" value="FERMA" />
    <span id="tempo_timer">Timer</span>
</div>

You need to use a delegated event handler as you bound the event to `#inizia_timer` on load, before the element existed. See the question I marked as duplicate for the solution. Also note that changing `id` attributes dynamically is not a very good idea. You should keep `id` static and add/remove classes instead. — Rory McCrossan, Jul 30 '16 at 18:57
use `$("#inizia_timer").click(function() {alert($(this).attr("id"));});` inside the first `click` event after `$(this).attr("id", "inizia_timer");` — Naman, Jul 30 '16 at 19:13
I know but then I need of an other function: `$("#inizia_timer").click(function() {` @nmnsud — Fabio97, Jul 30 '16 at 19:17
@Fabio97 _"I know but then I need of an other function: `$("#inizia_timer").click(function() {`"_ `inizia_timer` would not exist in `document` until `#avvia_timer` is clicked — guest271314, Jul 30 '16 at 19:29

score 0 · Answer 1 · answered Jul 30 '16 at 19:01

0

You can attach click event to element having new id following changing id

$("#avvia_timer").click(function() {
    $(this).val("INIZIA")
    .attr("id", "inizia_timer")
    .on("click", function() {
      alert(this.id)
    })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="timer">
    <input type="button" id="avvia_timer" value="AVVIA" />
    <input type="button" id="stop_timer" value="FERMA" />
    <span id="tempo_timer">Timer</span>
</div>

answered Jul 30 '16 at 19:01

guest271314

1
15
104
177

Uncaught TypeError: $(...).on is not a function on line ` .on("click", function() {` – Fabio97 Jul 30 '16 at 19:07
@Fabio97 Is jQuery defined? Is `javascript` at Answer within `.ready()` handler? – guest271314 Jul 30 '16 at 19:11
Yes it is @guest271314 – Fabio97 Jul 30 '16 at 19:15
@Fabio97 Can you create a plnkr http://plnkr.co or jsfiddle http://jsfiddle.net to demonstrate? – guest271314 Jul 30 '16 at 19:16
Later I need to use this new id `$("#inizia_timer").click(function() {` – Fabio97 Jul 30 '16 at 19:21
@Fabio97 You can use the pattern at Answer, that is, attach `.click(handler)` chained to `.attr("id", "newId")`, or approaches described at duplicate Answer http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements . `$("#inizia_timer")` would not be defined before click of original element as element having `id` `inizia_timer` would not exist in `document`. You can attach event to element when element is created, as demonstrated at Answer; or, attach event to element parent element. See https://learn.jquery.com/events/event-delegation/ – guest271314 Jul 30 '16 at 19:23

Change id with jquery: Why doesn't it work?

1 Answers1