代码之家  ›  专栏  ›  技术社区  ›  charlie

使用ajax调用修改dom后js函数不工作

  •  0
  • charlie  · 技术社区  · 6 年前

    我有一个通过ajax调用加载内容的模式。

    ajax调用将一个新表单加载到模式体中,我需要在此表单上使用一些js插件(显示映射、使用tinymce、choosed.js等)。

    我尝试了很多我在其他文章中读到的东西,但没有一个是为我工作的…

    // Performs a lot of things
    function init() {
        $('.chosen').chosen();
        $('.toggleswitch').bootstrapToggle();
        tinymce.init();
    }
    
    // Long Google Maps function
    function initAutocomplete() {
        // a lot of code
    }
    
    // Another Google Maps function
    function fillInAddress() {
        // a lot of code
    }
    
    //The problematic function
    $('#modalEditLieu').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget);
        var lieu_id = button.data('lieu-id');
        $("#modalEditLieu .modal-body").html('').addClass('loading');
        $.get( "/lieux/" + lieu_id + "/edit", function( data ) {
            // Here I fill modal body with html send by ajax call
            $("#modalEditLieu .modal-body").html(data).removeClass('loading');
    
            // I tried to call functions again here
            init();
            initAutocomplete;
            fillInAddress();
    
            // I also tried to put it in 
            // $("#modalEditLieu .modal-body").html(data).promise().then(...) 
            // as suggested in some posts
    
        });
    });
    
    // I call all the functions in here
    $('document').ready(function () {
        init();
        initAutocomplete;
        fillInAddress();
    });
    
    // I tried to call it in the ajaxComplete event as suggested but it does not work
    $( 'document' ).ajaxComplete(function() {
        init();
        initAutocomplete;
        fillInAddress();
    });
    

    我知道在第一次加载时调用的函数是基于第一个dom的,它们不会在动态加载的html上工作。

    但我尝试了很多不同的方法,阅读了很多,但我不能让它工作…

    0 回复  |  直到 6 年前