Was ist los mit dieser jQuery-Klickfunktion?

Question

Ich arbeite gerade an einem ziemlich doof Projekt, nur um meinen Fuß in die Tür von jQuery zu bekommen. Hier ist, was ich bisher habe:

$("#buyOne").click(function() { 
    one++; 
    var costOne = 10; 
    if (coins - costOne < 0) { 
     alert("Dogs ain't free, ya know!"); 
    } else { 
     dogs += 1; 
     coins -= costOne; 
     $("#main").html("You have " + coins + " coins."); 

     var levelOne = $("<div></div>", { 
      "class" : "levelOne dog one"+one 
     }) 

     $("body").append(levelOne); 

     var battleOne = $("<button class='battleOne'>Send dog to battle</button>"); 

     $(".one"+one).append(battleOne); 
    } 
}); 

$(".battleOne").click(function() { 
    coins += 1; 
    alert("Your dog won the battle! + 1 coin"); 
}); 

Sorry über die flippige Stackoverflow-Formatierung, aber mein Problem ist, dass die Klick-Funktion auf .battleOne nicht funktioniert. Kann mir jemand sagen, was ich falsch mache? Vielen Dank!

Answer 1

var battleOne = $("<button class='battleOne'>Send dog to battle</button>"); 
 

 
$(".one").click(function() { 
 
    $('body').append(battleOne); 
 

 
}); 
 

 
$(document).on("click",".battleOne",function() { 
 
    alert("Your dog won the battle! + 1 coin"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class='one'>add</button>