Menu
My requirement is to create number of buttons equal to the json array count. I was successful in creating buttons dynamically in jquery. But the method in .ready function of jquery is not called for the click action. I have tried searching in SO. Found few solutions but nothing worked for me. I am very new to jquery. Please help...
my code: jQuery:
$(document).ready(function() { currentQuestionNo = 0; var questionsArray; $.getJSON('http://localhost/Sample/JsonCreation.php', function(data) { questionsArray = data; variable = 1; //CREATE QUESTION BUTTONS DYNAMICALLY ** NOT WORKING for (var question in questionsArray) { var button = $("<input>").attr("type", "button").attr("id", "questionButton").val(variable); $('body').append(button); //Tried using .next here - but it dint work... //$('body').append('<button id="questionButton">' + variable + '</button>'); variable++; } displayQuestionJS(questionsArray[currentQuestionNo], document); }); $("button").click(function() { if ($(this).attr('id') == "nextQuestion") { currentQuestionNo = ++currentQuestionNo; } else if ($(this).attr('id') == "previousQuestion") { currentQuestionNo = --currentQuestionNo; } displayQuestionJS(questionsArray[currentQuestionNo], document); }); function displayQuestionJS(currentQuestion, document) { document.getElementById('questionNumber').innerText = currentQuestion.questionNumber; document.getElementById('questionDescription').innerText = currentQuestion.quesDesc; $('label[for=optionA]').html(currentQuestion.optionA); $('label[for=optionB]').html(currentQuestion.optionB); $('label[for=optionC]').html(currentQuestion.optionC); } HTML content <form method="post" name="formRadio"> <label id="questionNumber"></label>. <label id="questionDescription"></label> <br /> <input type="radio" id="optionA"> </input> <label for="optionA"></label> <br /> <input type="radio" id="optionB"> </input> <label for="optionB"></label> <br /> <input type="radio" id="optionC"> </input> <label for="optionC"></label> <br /> <button id="previousQuestion">Previous Question</button> <button id="nextQuestion">Next Question</button> <br /> <br /> <input type="submit" id="submitButton" name="submitTest" value="Submit"></input> </form> EDIT -- Sample .on Method code - Separate file: WORKING - THANKS A LOT
<script> $(document).ready(function() { $("button").click(function() { var button = '<input type="button" id="button2" value="dynamic button">'; $('body').append(button); }); }); $(document).on('click','#button2', function() { alert("Dynamic button action"); }); </script> </head> <body> <button id="button">Static Button</button> </body> 
489
You create buttons dynamically because of that you need to call them with .live() method if you use jquery 1.7
but this method is deprecated (you can see the list of all deprecated method here) in newer version. if you want to use jquery 1.10 or above you need to call your buttons in this way:
$(document).on('click', 'selector', function(){ // Your Code }); For Example
If your html is something like this
<div id="btn-list"> <div class="btn12">MyButton</div> </div> You can write your jquery like this
$(document).on('click', '#btn-list .btn12', function(){ // Your Code }); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
