Всем доброго времени суток!
JS изучаю недавно, столкнулся тут с определенной проблемой. У меня есть блок, куда я посредством AJAX подгружаю несколько label'ов, далее я хочу чтобы при клике по определенному label'у открывалось свое контекстное меню, в котором ссылки и при нажатию на ссылки отрабатывали определенные события. В целом ничего сложного, только столкнулся с проблемой, что когда я вернул в div контент, кликаю, а клик по ссылкам в меню не работает, делаю через on().
Вот так отправляю ajax
function ajaxOpenDir(dir) {
if (dir == undefined){
var dir = '';
}
$.ajax({
type: "POST",
url: 'php/obr.php',
data: {
dir: dir
},
success: function(data){
$('.box').text('');
$('.box').append(data);
fontSizeAnim(0);
if(anim == 0) {
$('.box-elem').show();
} else $('.box-elem').slideDown(800);
}
});
}
Вот так делаю свое меню
$('.box').on('mousedown', 'label', function( event ){
//$('.box').mouseup(function(event) {
$('*').removeClass('selected-html-element');
// Удаляем предыдущие вызванное контекстное меню:
$('.context-menu').remove();
if (event.which == 3){
// Получаем элемент на котором был совершен клик:
var target = $(event.target);
// Добавляем класс selected-html-element что бы наглядно показать на чем именно мы кликнули (исключительно для тестирования):
target.addClass('selected-html-element');
// Создаем меню:
$('<div/>', {
class: 'context-menu' // Присваиваем блоку наш css класс контекстного меню:
})
.css({
left: event.pageX+'px', // Задаем позицию меню на X
top: event.pageY+'px' // Задаем позицию меню по Y
})
.appendTo('body') // Присоединяем наше меню к body документа:
.append( // Добавляем пункты меню:
$('<ul/>').append('<li id="qw"><a href="#">Открыть</a></li>')
.append('<li><a href="#">Переименовать</a></li>')
.append('<li><a href="#">Удалить</a></li>')
)
.show('fast'); // Показываем меню с небольшим стандартным эффектом jQuery. Как раз очень хорошо подходит для меню
}
});
Ну и соответственно вызываю
$('.box').on('click', 'label', function(){
var dir = $(this).prev();
dir = $(dir).val();
ajaxOpenDir(dir);
});
Далее пишу на #qw клик, но я так понял он в не зоне видимости
$('.box').on('click', '#qw', function(){
//$('#qw').click(function(){
var Elem = $('.selected-html-element');
// $('*').removeClass('selected-html-element');
// // Удаляем предыдущие вызванное контекстное меню:
// $('.context-menu').remove();
console.log(Elem);
});
Пробовал и клик и on(), не срабатывает и все, если кто сталкивался, прошу посоветуйте хотя бы куда посмотреть..
