onclick() function to fetch button value to text box working only one time

Question

My onclick() function to fetch a button's value to a text box is working only one time. Here is a JQuery function to add the button's value to an input text box

$("button").click(function() {
    var fired_button = $(this).val();
    var word = document.getElementById("str").value + ' ' + fired_button;
    document.getElementById("str").value = word;            
});

HTML code

<button class="btn m-1 btn-secondary" id="sel0"  value="<?php echo $row2['W1']; ?>"><?php echo 
row2['W1']; ?> </button> 
<button class="btn m-1 btn-secondary"  id="sel1"  value="<?php echo $row2['W2']; ?>"><?php echo 
$row2['W2']; ?></button>
<button class="btn m-1 btn-secondary"  id="sel2"   value="<?php echo $row2['W3']; ?>"><?php echo 
$row2['W3']; ?></button>
<button class="btn m-1 btn-secondary"  id="sel3"   value="<?php echo $row2['W4']; ?>"><?php echo 
$row2['W4']; ?></button>

After clicking the start button it's working fine and displaying the values of the clicked button in the textbox

But after I fetch the next row in the query, the AJAX values are being changed and the onclick function is not working.

It's a quiz project. I want onclick to fetch the button value into the textbox, which is working right on the first call. But, after fetching the second row by clicking next button, then it's not working.

https://stackoverflow.com/questions/16598213/how-to-bind-events-on-ajax-loaded-content — Giacomo M, Dec 08 '20 at 08:56
Does this answer your question? [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — freedomn-m, Dec 08 '20 at 08:56
`$("button").click` only applies to elements that exist at the time, use event delegation, `$(document).on("click", "button", ...` — freedomn-m, Dec 08 '20 at 08:57
@freedomn-m or khalander bankapur, please post an answer to the question now that it is solved. — Kirby, Dec 08 '20 at 20:49

khalandar bankapur · Accepted Answer · 2020-12-14T07:09:38.740

0

$(document).on("click", "button", function() {

    var fired_button = $(this).val();
    var word = document.getElementById("str").value + ' ' + fired_button;
    document.getElementById("str").value = word;
        
});

/* here we are using document as entity from which in the document if we click the button tag this function will be executed*/

edited Dec 14 '20 at 07:09

answered Dec 09 '20 at 10:52

khalandar bankapur

51
6

2

Please provide an explanation about your solution, https://stackoverflow.com/help/how-to-answer – lissettdm Dec 09 '20 at 14:25

onclick() function to fetch button value to text box working only one time

1 Answers1