모달 로드를 위해 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> 

링크는 모달 코드로 이동하며 마지막 섹션의 모달 코드는 추가되는 제품 ID이므로 이 페이지를 제공할 API에 대한 고유한 요청을 생성합니다.나는 이 링크의 코드를 가지고 놀았습니다. jQuery Ajax 부트스트랩 모달 로딩 이제 내가 가진 문제는 e.preventDefault 실행하면 그것을 무시하고 링크로 이동하는 것 같습니다. 누구든지 내가 여기서 뭘 잘못하고 있는지 볼 수 있습니다.오류를 찾아보니 조그에 오류가 없는 것 같고 내가 찾은 것에서 클릭 기능에 들어가지 않지만 응답을 기다리는 동안 계속 수정하려고 노력할 것입니다.

편집하다:

jQuery는 이 코드 위에 올바르게 로드되었습니다. 저는 jinja2를 사용하고 있으며 모든 중요한 js는 기본 템플릿에 포함된 다음 다음을 사용하여 자녀에게 포함됩니다. {{ super() }} 그런 다음 다른 모든 스크립트는 이 아래에서 실행됩니다. 이 전에 실행되는 JavaScript의 또 다른 비트는 완벽하게 작동합니다. 이는 데이터 테이블에 대해서만 아래에 전체 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 경로입니다. 경로가 모달의 콘텐츠를 로드하기 때문에 올바르게 작동하지만 기본 페이지에 추가되어야 하고 필요하지 않기 때문에 스타일이 없습니다.

편집하다:부트스트랩 문서를 읽어보니 이것이 더 이상 페이지에 로드되지 않지만 모달도 작동하지 않는 것으로 나타났습니다. 제대로 된 것 같지만 확실하지 않습니다.

<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의 일부입니다.여기에는 이벤트 리스너를 해당 요소에 연결하는 몇 가지 다른 작업이 있으며 실제로 보고 있는 것은 두 가지 이벤트가 발생하는 것입니다.클릭 핸들러에서 캡처한 것과 부트스트랩 API에 의해 등록된 것입니다.

데이터 속성 API를 사용하여 모달을 초기화하는 대신 이미 수행한 것처럼 클릭을 캡처하고 거기에서 모달을 초기화하십시오.초기화 코드는 다음과 유사합니다.

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

또한 나중에(초기화 이후)까지 모달 표시를 지연하려면 다음과 같이 할 수 있습니다.

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

자세한 내용은 Bootstraps 문서를 확인하세요. 꽤 괜찮은 것으로 나타났습니다.

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