jquery - 新しく作成された要素のイベント

Question

私は現在、このJavaScriptを持っています:

$(document).on('click', '.add_option', function(e){
    e.preventDefault();
    $.get("/options/render_option", function(data){
        $('.add_option_control_group').before(data.option)
        $('#pollview').append(data.view)
        $(document).on('keyup', '.options', function(){
            that = $(this);
            index = $('.options').index(this);
            $('label.pollviewoptions:eq(' + index + ')').find('span').text(that.val());
        });
    }); 
});

HTML:

 <div class="span3">
        <label class="control-label" for="inputPhoto">Option</label>
        <div class="controls">
            <input class="span3 options" name="option[]" type="text" placeholder="Text">
            <br />
        </div>
    </div>
    <div class="span2">
        <label class="control-label" for="inputPhoto">Image</label>
        <div class="controls">
            <input class="span2" name="userfile[]" type="file" id="inputFile" placeholder="File">
            <br />
            <?php echo isset($file_errors['userfile']) ? "<span class='label label-important'>{$file_errors['userfile']}</span>" : '';?>
        </div>
    </div>
    <div class="clearfix">&nbsp;</div>
    <div class="span3">
        <label class="control-label" for="inputPhoto">Option</label>
        <div class="controls">
            <input class="span3 options" name="option[]" type="text" placeholder="Text">
            <br />
        </div>
    </div>
    <div class="span2">
        <label class="control-label" for="inputPhoto">Image</label>
        <div class="controls">
            <input class="span2" name="userfile[]" type="file" id="inputFile" placeholder="File">
            <br />
        </div>
    </div>
    <div class="clearfix">&nbsp;</div>        
<div class="add_option_control_group control-group">
    <label class="control-label" for="inputDescription">&nbsp;</label>
    <div class="controls">
        <a href="javascript:void(0)" class="btn btn-primary add_option">Add Option</a>
        <br />
    </div>
</div>

<div class="span4">
    <div class="well" id="pollview">
        <legend>Legend</legend>
        <label class="checkbox pollviewoptions">
            <input type="checkbox"><span>Check me out</span>
        </label>
        <label class="checkbox pollviewoptions">
            <input type="checkbox"><span>Check me out</span>
        </label>
    </div>
</div>

現在、機能しません。ajax リクエストは、レスポンスから html を取得し、ページの 2 つの領域に要素を挿入します。

data.option:

<div class="span3">
    <label class="control-label" for="inputPhoto">Option</label>
    <div class="controls">
        <input class="span3" name="option[]" type="text" placeholder="Text">
        <br />
    </div>
</div>
<div class="span2">
    <label class="control-label" for="inputPhoto">Image</label>
    <div class="controls">
        <input class="span2" name="userfile[]" type="file" id="inputFile" placeholder="File">
        <br />
        <?php echo isset($file_errors['userfile']) ? "<span class='label label-important'>{$file_errors['userfile']}</span>" : '';?></span>
    </div>
</div>
<div class="clearfix">&nbsp;</div>

データビュー

<label class="checkbox pollviewoptions">
    <input type="checkbox"> Check me out
</label>

作成されたすべての要素が keyup イベントに応答するわけではありません。

Answer 1

.optionsクラスがのテキスト入力要素はなくdata.option、 のみがあり.span3ます。