Чего мне не хватает, чтобы применить этот виджет JQuery к динамическим элементам?

Question

У меня есть следующий скрипт:

$(function() {
   $( 'input[id^="event_"' ).each(function() {
        this.datetimepicker({
            stepMinute: 15  
        });
    }); 
});

Обычно применение виджета datetimepicker включает в себя этот код (который работает далее на странице):

$(function() {
    $( "#datepicker" ).datetimepicker({
        stepMinute: 15  
    });
});

Что этоследует применить виджет datetimepicker к каждому из полей ввода в этом сгенерированном коде:

<table>
    <thead>
        <tr>
            <td>Event Name</td>
            <td>Event Date</td>
            <td></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="text" id="1" value="Opening" /></td>
            <td><input type="text" id="event_1" value="2011-09-15 20:30:00" /></td>
            <td>Save stuff here?</td>
        </tr>
        <tr>
            <td><input type="text" id="2" value="First Act" /></td>
            <td><input type="text" id="event_2" value="2011-09-15 20:45:00" /></td>
            <td>Save stuff here?</td>
        </tr>
        <tr>
            <td><input type="text" id="3" value="Some Event" /></td>
            <td><input type="text" id="event_3" value="2011-09-16 20:00:00" /></td>
            <td>Save stuff here?</td>
        </tr>
        <tr>
            <td><input type="text" id="4" value="Some Other Event" /></td>
            <td><input type="text" id="event_4" value="2011-09-17 20:00:00" /></td>
            <td>Save stuff here?</td>
        </tr>
        <tr>
            <td><input type="text" id="30" value="1234" /></td>
            <td><input type="text" id="event_30" value="2011-09-30 11:00:00" /></td>
            <td>Save stuff here?</td>
        </tr>
        <tr>
            <td><input type="text" id="32" value="Statement Check" /></td>
            <td><input type="text" id="event_32" value="2011-09-29 10:30:00" /></td>
            <td>Save stuff here?</td>
        </tr>
    </tbody>
</table>

Я на 95% уверен, что мой синтаксис неверен в блоке $(function() { ... });, но яне знаю, где я ошибся.

РЕДАКТИРОВАТЬ: Как примечание, это в конечном итоге будет редактировать перечисленные события с помощью вызова AJAX.Таким образом, каждая строка является событием, которое требует отдельного сохранения после редактирования.

Спасибо всем заранее за все комментарии / предложения / решения!

Answer 1

Внутри вашей функции each, this относится к собственному узлу DOM, у которого нет метода с именем datetimepicker.Чтобы использовать datetimepicker, вы должны создать из него объект jQuery, передав его конструктору jQuery $(this):

$(function() {
   $( 'input[id^="event_"]' ).each(function() {
        $(this).datetimepicker({
            stepMinute: 15  
        });
    }); 
});

---

Однако вам это вообще не нужно,Вы можете полностью отказаться от each и вызвать datetimepicker непосредственно в исходной коллекции:

$(function() {
   $( 'input[id^="event_"]' ).datetimepicker({
        stepMinute: 15  
   });
});