Javascript模块parttern ajax

Question

我正在学习javascript设计模式。所以我将粗糙的jQuery代码转换为更清晰的模块模式。问题是，如何在ajax加载模块模式（Object literal）之后调用click事件。我曾经使用$（document）.ajaxcomplete（callback）来解决它。

这里是工作supergetti代码

$('.meidaBtn, #media_load_btn').on('click', function(event) { 
 
    event.preventDefault(); 
 
    $('.media').show(500); 
 

 
    $('#mediaBox').html('Loading...'); 
 
    var link = location.origin + '/dashboard/media'; 
 

 
    $.ajax({ 
 
    url: link 
 
    }).done(function(data) { // data what is sent back by the php page 
 
    $('#mediaBox').html(data); // display data 
 

 
    // Click through 
 
    $('.imageBox img').bind('click', function() { 
 
     var src = $(this).attr('src'); 
 
     var alt = $(this).attr('alt'); 
 
     src = src.replace('tumbnail_', ''); 
 

 
     tinyMCE.execCommand('mceInsertContent', false, '<img src="' + src + '" alt="' + alt + '">'); 
 
     $('.media').hide(); 
 
    }); 
 
    }); 
 

 
});

这里是JavaScript模块模式/对象常量

var mediaPlugin = { 
 
    init: function() { 
 
    this.cacheDom(); 
 
    this.bindEvents(); 
 
    }, 
 

 
    // Cache Dom 
 
    cacheDom: function() { 
 
    this.baseUrl = location.origin + '/dashboard/media'; 
 

 
    this.$button = $('.meidaBtn, #media_load_btn'); 
 
    this.$media = $('.media'); 
 
    this.$mediaBox = $('#mediaBox'); 
 
    this.$imageBox = $('.imageBox img'); 
 
    }, 
 

 
    // Bind Events 
 
    bindEvents: function() { 
 
    this.$button.on('click', this.render.bind(this)); 
 
    this.$imageBox.on('click', this.addImage.bind(this)); 
 
    }, 
 

 
    // Show Data 
 
    render: function(e) { 
 
    e.preventDefault(); 
 
    this.$media.show(500); 
 
    this.loadData(); 
 
    }, 
 

 
    // Load the data 
 
    loadData: function() { 
 
    var that = this; 
 
    $.ajax({ 
 
     url: this.baseUrl, 
 
     type: 'GET', 
 
     success: function(data) { 
 
     // console.log(that.$mediaBox); 
 
     that.$mediaBox.html(data); 
 
     }, 
 
     error: function() { 
 
     console.log("An error occored!"); 
 
     }, 
 
     complete: function() { 
 
     // console.log("I am now complete"); 
 
     // that.loadMore(); 
 
     } 
 
    }); 
 
    }, 
 

 
    // Add Image 
 
    addImage: function() { 
 
    var src = $(this).attr('src'); 
 
    var alt = $(this).attr('alt'); 
 
    src = src.replace('tumbnail_', ''); 
 

 
    tinyMCE.execCommand('mceInsertContent', false, '<img src="' + src + '" alt="' + alt + '">'); 
 
    this.$media.hide(); 
 
    } 
 
}; 
 

 
mediaPlugin.init();

Answer 1

我终于想通了如何获得此代码工作。我用jquery .delegate（）和我现在工作像魔术。以下是工作代码。感谢@ abc123为了阻止。

var media = (function(){ 
// Cache dom 
var baseUrl = location.origin+'/dashboard/media'; 

var $button = $('.meidaBtn, #media_load_btn'); 
var $media = $('.media'); 
var $mediaBox = $('#mediaBox'); 
var $imageBox = $mediaBox.find('img'); 

var options = { 
    url: baseUrl, 
    type: 'GET', 
    success: function(data){ 
     $mediaBox.html(data); 
    }, 
    error: function(){ 
     console.log("An error occored!"); 
    }, 
    complete: function(){ 
     // console.log("I am now complete"); 
     // that.loadMore(); 
    } 
}; 

// Bind Events 
$button.on('click', _render); 
$mediaBox.delegate('.imageBox', 'click', _addImage); 

function _render(e){ 
    e.preventDefault(); 
    $media.show(500); 
    _loadData(); 
} 

// Load images 
function _loadData(){ 
    $.ajax(options); 
} 

// Add Images 
function _addImage(){ 
    img = $(this).find('img'); 

    console.log(img.attr('src')); // This should display the image url 
} 

}）（）;

Answer 2

下面提供的方法将一个简单属性添加到用作委托/回调的对象中。您只需将您的函数指向它，然后它会自动调用，因为它在完整事件中被调用。

var mediaPlugin = { 
 
    init: function() { 
 
    this.cacheDom(); 
 
    this.bindEvents(); 
 
    }, 
 

 
    // Cache Dom 
 
    cacheDom: function() { 
 
    this.baseUrl = location.origin + '/dashboard/media'; 
 

 
    this.$button = $('.meidaBtn, #media_load_btn'); 
 
    this.$media = $('.media'); 
 
    this.$mediaBox = $('#mediaBox'); 
 
    this.$imageBox = $('.imageBox img'); 
 
    }, 
 

 
    // Bind Events 
 
    bindEvents: function() { 
 
    this.$button.on('click', this.render.bind(this)); 
 
    this.$imageBox.on('click', this.addImage.bind(this)); 
 
    }, 
 

 
    // Show Data 
 
    render: function(e) { 
 
    e.preventDefault(); 
 
    this.$media.show(500); 
 
    this.loadData(); 
 
    }, 
 

 
    loadDataComplete: function() {}, 
 
    
 
    // Load the data 
 
    loadData: function() { 
 
    var that = this; 
 
    $.ajax({ 
 
     url: this.baseUrl, 
 
     type: 'GET', 
 
     success: function(data) { 
 
     // console.log(that.$mediaBox); 
 
     that.$mediaBox.html(data); 
 
     }, 
 
     error: function() { 
 
     console.log("An error occored!"); 
 
     }, 
 
     complete: function() { 
 
     // console.log("I am now complete"); 
 
     // that.loadMore(); 
 
     that.loadDataComplete(); 
 
     } 
 
    }); 
 
    }, 
 
    
 
    // Add Image 
 
    addImage: function() { 
 
    var src = $(this).attr('src'); 
 
    var alt = $(this).attr('alt'); 
 
    src = src.replace('tumbnail_', ''); 
 

 
    tinyMCE.execCommand('mceInsertContent', false, '<img src="' + src + '" alt="' + alt + '">'); 
 
    this.$media.hide(); 
 
    } 
 
}; 
 

 
var myCompleteFunction = function myCompleteFunction() {} 
 
mediaPlugin.init(); 
 
mediaPlugin.loadDataComplete = myCompleteFunction; 
 
mediaPlugin.loadData();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>