Best IT Recipes

Jquery - Click event does not work for dynamically created button

My requirement is to create a number of buttons equal to the json array count. I managed to create dynamic buttons in jQuery. But the method in the .ready of the jquery function is not called for the click action. I tried searching in SO. Found some 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>. &nbsp; <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 - Example .on Method code - Single file: WORKING - THANKS 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>
+50
jquery html
Dec 28 '13 at 9:20
source share
4 answers

You create buttons dynamically, which is why you need to call them using the .live() method if you are using jquery 1.7

but this method is deprecated (you can see a list of all deprecated methods here ) in the new version. if you want to use jquery 1.10 or higher, you need to call your buttons this way:

 $(document).on('click', 'selector', function(){ // Your Code });

Example

If your html is something like this

 <div id="btn-list"> <div class="btn12">MyButton</div> </div>

You can write your jquery as follows

 $(document).on('click', '#btn-list .btn12', function(){ // Your Code });
+111
Dec 28 '13 at 21:37
source share

I assume that the buttons you created are not yet on the page when you anchor the button. Either bind each button in the $.getJSON function, or use the dynamic binding method, for example:

 $('body').on('click', 'button', function() { ... });

Note that you probably don't want to do this on the body tag, but instead wrap the buttons in another div or something else and call on on it.

jQuery On Method

+3
Dec 28 '13 at 21:28
source share

A simple and easy way to do this is to use for an event:

 $('body').on('click','#element',function(){ //somthing });

but we can say that this is not the best way to do this. I suggest another way to do this is to use the clone () method instead of using dynamic html. Write, for example, html in the file:

 <div id='div1'></div>

Now in the script tag, create a clone of this div, then all the properties of this div will follow with the new element. For example:

 var dynamicDiv = jQuery('#div1').clone(true);

Now use the dynamicDiv element wherever you add it, or change its properties as you like. Now all jQuery functions will work with this element.

+2
Nov 20 '15 at 10:47
source share

You can also create an enter button this way:

 var button = '<input type="button" id="questionButton" value='+variable+'> <br />';


This may be the syntax for creating a Button that is somehow disabled.

0
Dec 28 '13 at 21:37
source share


More articles:


All Articles