無法訪問動態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'); 
}); 


});