CODEWITHSUNDEEP
javascriptjquerydom
user2130360
user2130360

Reputation: 25

Cant access dynamic DOM Elements

I guess I'm missing something. Even after the document is ready even if I've dynamically created elements by appending shouldn't I have access to them? I can use jQuery .hide() for instance but can access the same element to use the date picker on. Dynamic quiz form as follows.

$(document).ready(function() {
    var question_id = 1;
    var answer_id = 1;
    // answer count, where i = question_id;
    var answer_count = new Array();

    // Create Quiz
    $('.create_quiz').click(function() {
        $('.create_quiz').hide();
        $('<div></div>').appendTo('form');
        $('<label>Quiz Name: </label><input type="text"  name="quiz_name">').appendTo('form>div');
        $('<label class="total_pnts">Total Points: </label><input type="text" id="total_points" style="width:05%" name="total_points">').appendTo('form>div');
        $('<label class="date_assig">Date Assigned: </label><input type="text" id="date_assigned" style="width:05%" name="date_assigned">').appendTo('form>div');
        $('<label class="due_dte">Due Date: </label><input type="text" id="due_date" style="width:05%" name="due_date">').appendTo('form>div');
        $('<br/>').appendTo('form>div');
        $('<button type="button" class="add_question">Add Question</button>').appendTo('form>div');
        $('<input type="submit" value="Save Quiz">').appendTo('form');

/* WHAT WRONG WITH $('#due_date').datepicker(); RIGHT HERE
 The DOM is available. I have all my jQuery and plugins correct so
 no need to state any of that kind stuff. */                

    });

    // Add Question Button
    $('form').on('click', '.add_question', function() {

        $('.total_pnts').hide();
        $('#total_points').hide();
        answer_count[question_id] = 0;
        $('.add_question').hide();
        $('<div class="question" id="' + question_id + '"></div>').appendTo('form>div');

Upvotes: 0

Views: 474

Answers (1)

monkeyhouse
monkeyhouse

Reputation: 2896

It seems to work okay on js fiddle. I changed the code a bit for clarity. http://jsfiddle.net/8tXPx/ Make sure you're including the proper jqueryui js and css files.

HTML

<form>
    <input type="button" class="create_quiz" value="Create Quiz"/>
</form>

jQuery 

$(function(){
var question_id = 1;
var answer_id = 1;

// answer count, where i = question_id;
var answer_count = new Array();

// Create Quiz
$('.create_quiz').click(function() {
   $('.create_quiz').hide();

   $('<div></div>').appendTo('form');


  var formbody = '<label>Quiz Name: </label><input type="text" name="quiz_name"><label   class="total_pnts"> Total Points: </label><input type="text" id="total_points" style="width:05%" name="total_points"> <label class="date_assig">Date Assigned: </label><input type="text" id="date_assigned" style="width:05%" name="date_assigned"> <label class="due_dte">Due Date: </label><input type="text" id="due_date" style="width:05%" name="due_date"> <br/> <input type="button" class="add_question" value="Add Question">'

   $('form>div').append(formbody);
   $('<input type="submit" value="Save Quiz">').appendTo('form');
   $('#due_date').datepicker();
});


 $('form').on('click', '.add_question', function() {
   $('.total_pnts').hide();
   $('#total_points').hide();
  answer_count[question_id] = 0;
   $('.add_question').hide();
   $('<div class="question" id="' + question_id + '"></div>').appendTo('form>div');
 });


});

Upvotes: 1

Related Questions