Bootstrap Typeahead не работает с динамически добавляемыми элементами?

Я добавляю поле ввода с помощью функции onclick, поэтому поле ввода отсутствует при рендеринге страницы и при срабатывании document.ready().

Я придумал обходной путь, добавив функцию onclick в поле ввода, которое вызывает функцию javascript.

http://goo.gl/id6esq вернет json:

["1175-1234567890","1175-1234567891","1175-1234567892","1175-1234567893","1175-1234567894","1175-1234567895"]

(Мне не удалось заставить jsfiddle работать — не будет делать ввод)

<a id="clickbtn" class="btn-btn-inverse">Click me</a>

<div id="insert"></div>

<script type="text/javascript">
    $(function() {
        $('#clickbtn').on('click', function() {
            $('#insert').html("<input type='text' onclick='javascript:invoice_no_setup_typeahead($(this))' name='retrun-order-invoice_no' class='return-order-invoice_no' data-provide='typeahead'>");
        });
    });
    function invoice_no_setup_typeahead(self) {
        console.log('focus acheived');
        $(self).typeahead({
            source: function(query, process) {
                console.log(query);
                return $.get(
                        'http://goo.gl/id6esq', {
                    query: query
                },
                function(data) {
                    console.log(data);
                    return process(data);
                }, 'JSON');
            }
        });

    }
</script>

json jquery twitter-bootstrap bootstrap-typeahead
person Wallter    schedule 14.08.2013    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Пытаться

    $('#clickbtn').on('click', function() {
        var el = $("<input type='text' name='retrun-order-invoice_no' class='return-order-invoice_no'>").appendTo($('#insert').empty());
        invoice_no_setup_typeahead(el)
    });
person Arun P Johny    schedule 14.08.2013
comment
Это сработало! Благодарю вас! Не могли бы вы объяснить, почему это не сработало в первый раз? Хотите больше не сталкиваться с этим? - person Wallter; 14.08.2013