无法访问动态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');
 });


});