Есть у меня свой плагин на jquery.
Работает все нормально, но когда инициализация проходит при загрузке страницы.
А мне нужно по клику на кнопку, в модальном окне запустить этот плагин.
Сам js скрипт подключен на основной странице.
Далее делаю так:
// Функция подгрузки основного файла файлового менеджера
function FMOpen(UserId,where) {
var url ='/plagins/fileManager/bodyFileManager.php';
var data = {UserId: UserId};
ajax_loadInto(url,data,'POST',where,where);
}
$(document).ready(function(){
// клик по кнопке. Запускаем модальное окно и подгружаем туда php страницу
$('#fmBBbtn').click(function(){
$('.popup__overlay').fadeIn(500);
document.body.style.overflow="hidden";
FMOpen(window.sessID,'okno');
})
})
Сама php страница
error_reporting(E_ALL ^ E_NOTICE ^E_WARNING);
session_start();
$_SESSION['ID'] = isset($_SESSION['ID']) ? $_SESSION['ID'] : 0;
include_once("../../systemDir/config.php");
include_once("../../systemDir/functions.php");
$sql = DbMysql::getInstance();
$func = new Options();
header("Content-Type: text/html; charset=UTF-8");
$rating = $func->GetOne("rating","".MY_PREFIX."_users","id",$_SESSION['ID']);
if($rating >= $limitRatingForUpload){
$_REQUEST['UserId'] = isset($_REQUEST['UserId']) ? $_REQUEST['UserId'] : "";
settype($_REQUEST['UserId'],"int");
$user = 0;
?>
<script>
var myOptionFM = {
UserId : '<?=$_REQUEST['UserId']?>',
txtAreaID : 'lsarea'
}
$(document).ready(function(){
$('#fmb').FM(myOptionFM);
});
</script>
<div id="fmb"></div>
<?}else{?>
У вас недостаточно рейтинга для использования файлового менеджера - минимум <?=$limitRatingForUpload?> !
<?}?>
Здесь происходит инициализация самого плагина.
;(function($){
var base = this;
var methods = {
init : function( params ) {
var defaults = { urlReturnScript : '/plagins/fileManager/returnFileManager.php' };
base.options = $.extend({}, defaults, params);
var preData = {userID:options.UserId, folder: '0', type: 'load', collbackFunction: 'returnFM'};
methods.ajaxSend(preData);
$('#okno').on('click', "#tree div.fo", function(){
$(this).next().toggle(100);
$(".selected").removeClass("selected");
$(this).hasClass("closed") ? $(this).removeClass("closed").addClass("open selected") : $(this).removeClass("open").addClass("closed selected");
var preData = {userID:options.UserId, folder: $(this).attr('data-fo'), type: 'loadFolder', collbackFunction: 'returnFolder'};
methods.ajaxSend(preData);
});
},
returnFM : function(data) {
$('#fmb').html('<div class="ab-container ab-filemanager" id="ab-main">\
<div id="ab-content" class="ab-row">\
<div class="ab-col12" id="ab-breadcrumb"><div id="breadcrumb-links"></div></div>\
<div id="leftpanel" class="ab-col4"><div id="tree" style="display: block;"></div></div>\
<div class="ab-col8" id="ab-container-table">\
<table id="ab-list-pages"><thead><tr><th data-id="thisfolder"></th><th>Размер</th><th>Действие</th></tr></thead><tbody id="treeFiles"></div></div>');
$('#breadcrumb-links').html(data.BRED);
$('[data-id="thisfolder"]').html(data.FOLDERNAME);
$('#tree').html(data.MENUFOLDER);
},
returnFolder : function(data) {
$('#breadcrumb-links').html(data.BRED);
$('[data-id="thisfolder"]').html(data.FOLDERNAME);
if(data.FILES.length > 0){
var str = '';
for (var i=0; i < data.FILES.length; i++) {
str += '<tr class="white"><td class="ab-tdfile"><span class="ext-file ext-'+data.FILES[i].EXT+'">'+data.FILES[i].FILENAME+'</span></td>\
<td><small>'+data.FILES[i].SIZE+'</small></td>\
<td><button data-del="'+data.FILES[i].ID+'" class="ab-btn red delete-file" title="Удалить"><i class="fa fa-trash-o" aria-hidden="true"></i></button> \
<button data-ren="'+data.FILES[i].ID+'" class="ab-btn blue renamefile" title="Переименовать"><i class=" fa fa-random" aria-hidden="true"></i></button>\
<a href="/plagins/fileManager/downloadfile.php?file='+data.FILES[i].ID+'" class="ab-btn asphalt downloadfile" title="Скачать"><i class="fa fa-download" aria-hidden="true"></i></a>\
</td></tr>';
}
}else{
var str = '<tr class="white"><td class="ab-tdfile">Папка пуста!</td></tr>';
}
$('#treeFiles').html(str);
},
ajaxSend : function(opt) {
$.ajax({
url: '/plagins/fileManager/returnFileManager.php',
type: "POST",
data: opt,
beforeSend: function() {
},
complete: function() {
},
success: function(html) {
var data = JSON.parse(html);
if(data == null){alert("Произошла ошибка получения данных!");}else{
// Выполняем что-то после получения данных
try {
if (data.collbackFunction) methods[data.collbackFunction](data);
} catch (e) {
alert('Ошибка JSON: '+e.message+' Пожалуйста, сообщите администратору');
}
}
}, //success
error: function(e){
alert('Произошла ошибка запроса, попробуйте позднее!');
}
});
},
};
$.fn.FM = function(method) {
// логика вызова метода
if ( methods[method] ) {
return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === 'object' || ! method ) {
return methods.init.apply( this, arguments );
} else {
$.error( 'Метод с именем ' + method + ' не существует для jQuery.tooltip' );
}
} // $.fn.FM
})(jQuery);
Так собственно в чем проблема? При первом запуске модального окна(открытие плагина) все работает отлично, а вот при второй уже клики по элементам обрабатываются дважды, вместо одного, при третьем открытии каждый клик обрабатывается 3 раза и т.д.. почему это происходит и как это поправить?
