Невозможно получить доступ к динамическим элементам DOM

Question

Я предполагаю, что у меня что-то не хватает. Даже после того, как документ готов, даже если у меня есть динамически созданные элементы путем добавления, не должен ли я иметь к ним доступ? Например, я могу использовать jQuery .hide(), но могу получить доступ к тому же элементу, в котором будет использоваться элемент выбора даты. Динамическая викторина выглядит следующим образом.

$(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'); 

Answer 1

Кажется, что все работает на js скрипке. Я немного изменил код для ясности. http://jsfiddle.net/8tXPx/ Убедитесь, что вы ввели правильные jqueryui js и css-файлы.

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'); 
}); 


});