give appended button a class jquery

Question

I am new to jquery and would like to add a class to a button that I append in my script.js. Once the button is clicked I want to change the value of the button, for example it says "claim" right now, once clicked it should say "abandon".

this is my html (user inputs a task)

<!DOCTYPE html>
<html>
  <body>
<p class="current"></p>

<input id="input_listName"/><button id="btn_createList">add</button>
<script 
    <script src="script.js"></script>
  </body>
</html>

this is my js file

$(document).ready(function() {
  $('#btn_createList').click(function() {    
    $('.current').append($('#input_listName').val()).append(" ").append("<button class = 'claim'>claim</button>").append("<p></p>");


});


    $(".claim").click(function() {
        alert('clicked');
        $(this).val('abandon'); 
    });
});

When I click the "claim" button, nothing happens, but when I add css to the button with the class ".claim" it changes the style so I do not know why the click function on the button is not working.

Code function: a user inputs a task in the input, jquery is used to display the task and each task is given a "claim" button once displayed. When a user clicks on the button, the claim button is changed to say "abandon". That is all, thank you for any help.

give appended button a class jquery

0 Answers0