0

私は何かが欠けていると思います。ドキュメントの準備ができた後でも、要素を追加して動的に作成したとしても、それらにアクセスする必要はありませんか? たとえば、 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');
4

1 に答える 1

1

js fiddle で問題なく動作するようです。わかりやすくするために、コードを少し変更しました。 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');
 });


});
于 2013-04-24T05:07:29.657 に答える