Javascript 无法访问动态DOM元素

我想我错过了什么。即使在文档准备好之后，即使我已经通过附加动态创建了元素，我难道不应该访问它们吗？例如，我可以使用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');

$（文档）.ready（函数（）{
var问题id=1；
var answer_id=1；
//答案计数，其中i=问题编号；
var answer_count=新数组（）；
//创建测验
$（'.create_quick'）。单击（函数（）{
$（'.create_quick'）.hide（）；
$（''）。附录（'form'）；
$（'quick Name:'）。appendTo（'form>div'）；
$（'Total Points:'）。追加（'form>div'）；
$（'dateassigned:'）。appendTo（'form>div'）；
$（“到期日：”）.appendTo（'form>div'）；
$（“
”）.appendTo（'form>div'）；
$（'Add Question'）.appendTo（'form>div'）；
$（''）。附录（'form'）；
/*美元（“#到期日”）有什么问题吗。datepicker（）；就在这里
DOM是可用的。我所有的jQuery和插件都是正确的
无需声明任何此类内容。*/
});
//添加问题按钮
$（'form'）。在（'click'，'add_question'，function（）上{
$（'.total_pnts'）.hide（）；
$（“#总分”）.hide（）；
答案计数[问题id]=0；
$（'.add_question'）.hide（）；
$（''）.appendTo（'form>div'）；

在js fiddle上似乎可以正常工作。为了清晰起见，我对代码做了一些修改。 确保包含正确的jqueryui js和css文件

HTML

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


});

$（函数（）{
var问题id=1；
var answer_id=1；
//答案计数，其中i=问题编号；
var answer_count=新数组（）；
//创建测验
$（'.create_quick'）。单击（函数（）{
$（'.create_quick'）.hide（）；
$（''）。附录（'form'）；
var formbody='测验名称：总分：分配日期：截止日期：
'
$（'form>div'）。追加（formbody）；
$（''）。附录（'form'）；
$（“#到期日”）.datepicker（）；
});
$（'form'）。在（'click'，'add_question'，function（）上{
$（'.total_pnts'）.hide（）；
$（“#总分”）.hide（）；
答案计数[问题id]=0；
$（'.add_question'）.hide（）；
$（''）.appendTo（'form>div'）；
});
});

您看到了什么错误？@Slace Object[Object，Object]没有方法日期选择器。该方法来自js插件（jeditable）我正在另一个页面上使用它。事实上，我知道它很好。我只是因为一些奇怪的原因无法访问该元素。你有jquery ui js文件吗？你可以发布一个带有HTML源代码的JSFIDLE吗？@Arun谢谢。我没有包括ui，谢谢你用小提琴显示你们喜欢的清理过的代码

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


});