What is wrong with my logic my button only changes once and the onclick function stops?

Question

I want a button to switch between F and C each time i do the click but when i click the button a third time it just doesn't work even though i set back the class to .temp.

$(".temp").click(function() {
  $('#temperature').empty();
  $("#temperature").append(temp.main.temp + " <a class='temper' href='#'>C</a>");

  $(".temper").click(function() {
    $('#temperature').empty();
    $('#temperature').append(data.main.temp +" <a class='temp' href='#'>F</a>");
  });  
});

Welcome to Stack Overflow! The full content of your question must be **in** your question, not just linked. Links rot, making the question and its answers useless to people in the future, and people shouldn't have to go off-site to help you. Put a [mcve] **in** the question, ideally using Stack Snippets (the `<>` toolbar button) to make it runnable. More: [*How do I ask a good question?*](/help/how-to-ask) — T.J. Crowder, Mar 31 '17 at 10:43
Possible Duplicate: http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — Rajesh, Mar 31 '17 at 10:58
Thanks! T.J.Crowder for banning me from asking any more questions — Chris, Apr 02 '17 at 17:40

score 0 · Answer 1 · answered Mar 31 '17 at 10:46

0

I guess you are about to use live jquery event, this can help :

$(document).on("click", ".temp", function() {});
$(document).on("click", ".temper", function() {});

answered Mar 31 '17 at 10:46

kanzari

87
4

https://jsfiddle.net/Kanzari/n38xs8sn/2/ – kanzari Mar 31 '17 at 11:06

score 0 · Answer 2 · answered Mar 31 '17 at 11:09

Check this Fiddle it's working example but missing this part (temp.main.temp):

$( document ).ready(function() {

$(document).on("click", ".temp", function() {
    $('#temperature').empty();
  $("#temperature").append(" <a class='temper' href='#'>C</a>");
});
$(document).on("click", ".temper", function() {
$('#temperature').empty();
  $("#temperature").append(" <a class='temp' href='#'>F</a>");
  });
});

https://jsfiddle.net/Kanzari/n38xs8sn/2/

score -1 · Accepted Answer · answered Mar 31 '17 at 10:47

-1

In this line:

$("#temperature").append(temp.main.temp + " <a class='temper' href='#'>C</a>");

you are adding some html content dynamically.

So use:

$(document).on('click', '.temper', function(){

});

instead of static listener i.e.

$(".temper").click()

because this kind of listener works for static html only.

answered Mar 31 '17 at 10:47

Mayank Pandeyz

25,704
4
40
59

Thank you so much!!! It works now i spent atleast 4 hours trying to get it to work – Chris Mar 31 '17 at 10:54
@Chris use `.bind` `$(document).bind('click', '.temper', function(){...})` – Rajesh Mar 31 '17 at 10:54
Just a query Mayank. Should you not search for the duplicate as this is an obvious question? – Rajesh Mar 31 '17 at 10:55
@Rajesh: will keep thin in mind for future. – Mayank Pandeyz Mar 31 '17 at 11:16

score -1 · Answer 4 · answered Mar 31 '17 at 10:55

-1

why you wrote the code of temper.click inside the temp.click function? correct it as :

$(".temp").click(function(){

  $('#temperature').empty();
  $("#temperature").append(temp.main.temp+" <a class='temper' href='#'>C</a>");
});


$(".temper").click(function(){

   $('#temperature').empty();
   $('#temperature').append(data.main.temp+" <a class='temp' href='#'>F</a>"  );
});

answered Mar 31 '17 at 10:55

Arslan Naeem

86
1
8

This will not work. You will have to use delegates to handle it – Rajesh Mar 31 '17 at 10:56

What is wrong with my logic my button only changes once and the onclick function stops?

4 Answers4