E.PreventDefault () пропущен для модальной нагрузки

Question

Я нашел этот код, который использует AJAX для загрузки модала, это просто то, что мне нужно для загрузки динамических модалей из моих источников данных. У меня есть настройка тега для загрузки модального вот пример

<a class="blue" href="/api/getmodal/products/' + str(self.result.ids) + '" data-toggle="modal"> 
    <i class="icon-zoom-in bigger-130"></i> 
</a> 

.

Ссылка отправляется в модальный код и просто модальный код Последний раздел - это идентификатор продукта, который он добавляет, что он создает уникальный запрос на API, который затем обслуживает эту страницу. Я играю с кодом по этой ссылке jQuery ajax bootstrap модальная загрузка сейчас, это проблема Это вместо Gensodicetagcode работает, похоже, игнорирует его и перейти к ссылке, может кто-нибудь увидеть, что я мог бы сделать неправильно здесь. Искал ошибки, и в бегом, похоже, нет никаких ошибок, и он не попадает в функцию кликов из того, что я нашел, но продолжал пытаться исправить, пока я жду ответов.

Редактировать:

jQuery правильно загружен над этим кодом, который я использую Jinja2, и все важные JS включены в мой базовый шаблон, а затем включены в мой ребенок, используя e.preventDefault, то все остальные скрипта запускаются под этим, есть еще один бит JavaScript, который работает до Это отлично работает, что только для DataTable, я буду включать в себя весь раздел JS ниже. Разделы Console.log являются только для моей отладки, чтобы увидеть, достигает ли он кода.

jQuery(function($) {
        var oTable1 = $('#sample-table-2').dataTable( {
        "sAjaxSource": '/api/products/datatables',
        "aoColumns": [
          null, null,null, null, null,
          { "bSortable": false }
        ] } );


        $('table th input:checkbox').on('click' , function(){
            var that = this;
            $(this).closest('table').find('tr > td:first-child input:checkbox')
            .each(function(){
                this.checked = that.checked;
                $(this).closest('tr').toggleClass('selected');
            });     
        });
    })

    $(document).ready(function() {
        // Support for AJAX loaded modal window.
        $('[data-toggle="modal"]').click(function(e) {
            sleep(10000)
            e.preventDefault();
            console.log('point two');
            var url = $(this).attr('href');
            if (url.indexOf('#') == 0) {
                $(url).modal('open');
                console.log('point two');
                sleep(1000);
            } else {
                $.get(url, function(data) {
                    $('<div class="modal hide fade">' + data + '</div>').modal();
                    console.log('point three');
                });
            }
        });
    });

.

<Сильные> Редактировать: Ссылка на модаль - это просто маршрут WebApp2, который я знаю, что маршрут работает правильно, поскольку он загружает содержимое модала, но без стилирования, поскольку он должен быть добавлен на главную страницу и не нуждается в этом.

<Сильные> Редактировать: От чтения документов Bootstrap Это то, что я придумал, что это больше не загружается на страницу, но модаль не работает, я думаю, что у меня есть правильно, но не уверен.

<a class="blue" data-toggle="modal" href="/api/getmodal/products/' + str(self.result.ids) + '" data-target="#modalProduct" > 
    <i class="icon-zoom-in bigger-130"></i> 
</a> 

.

Answer 1

Атрибут Data-Toggle="Modal" является частью API Bootstraps.Здесь есть несколько других вещей, которые прикрепляют слушателей событий к таким элементам и то, что вы видите, это на самом деле два события происходит.Тот, который вы поймаете в своем обработчике клика, и тот, который зарегистрирован API Bootstraps.

вместо использования API атрибута данных, чтобы init Ваш модальный захват, который вы уже делаете, и инимите модаль.Код INIT будет выглядеть похожим на это:

$('#myModal').modal({
remote:url
});

.

Дополнительно, если вы хотите задержать отображение модального до более позднего точка (после init), вы можете сделать что-то подобное:

$('#myModal').modal({
remote:url,
show:false
});

.

Проверьте документацию Bootstraps для получения дополнительной информации, на которой я нашел ее довольно на месте.

http://getbootstrap.com/javascript/#modals