Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.02.2018, 18:26
Новичок на форуме
Отправить личное сообщение для AnonimS Посмотреть профиль Найти все сообщения от AnonimS
 
Регистрация: 07.02.2018
Сообщений: 5

Не работает свое меню после AJAX
Всем доброго времени суток!

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(), не срабатывает и все, если кто сталкивался, прошу посоветуйте хотя бы куда посмотреть..
Ответить с цитированием
  #2 (permalink)  
Старый 07.02.2018, 18:39
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,030

AnonimS,
Сообщение от AnonimS
<li id="qw"><
замените id на class
Ответить с цитированием
  #3 (permalink)  
Старый 07.02.2018, 18:41
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,030

Сообщение от AnonimS
$('.box').text('');
$('.box').append(data);
заменить на
$('.box').html(data);
Ответить с цитированием
  #4 (permalink)  
Старый 07.02.2018, 18:48
Новичок на форуме
Отправить личное сообщение для AnonimS Посмотреть профиль Найти все сообщения от AnonimS
 
Регистрация: 07.02.2018
Сообщений: 5

Сообщение от рони Посмотреть сообщение
AnonimS,

замените id на class
Сделал все, работает так же как и было.
Ответить с цитированием
  #5 (permalink)  
Старый 07.02.2018, 19:12
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,030

AnonimS,
3 строка
Сообщение от AnonimS
var dir = '';
var лишнее.
Ответить с цитированием
  #6 (permalink)  
Старый 07.02.2018, 19:14
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,030

Сообщение от AnonimS
работает так же как и было.
нужен живой пример
Ответить с цитированием
  #7 (permalink)  
Старый 07.02.2018, 20:51
Новичок на форуме
Отправить личное сообщение для AnonimS Посмотреть профиль Найти все сообщения от AnonimS
 
Регистрация: 07.02.2018
Сообщений: 5

Спасибо, вроде разобрался. Я меню добавляю к боди, а ищу его в боксе, глупая ошибка..
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
AJAX отказывается работать после восстановления соединения с интернетом? Evgen27 AJAX и COMET 2 13.03.2017 15:06
AJAX отказывается работать после восстановления соединения с интернетом? Evgen27 AJAX и COMET 1 13.03.2017 08:18
Ajax при заходе на страницу из поисковика - не работает Алексей_ГР Ваши сайты и скрипты 2 02.09.2013 23:03
Сохранение результата ajax запроса после нажатия 'back' gregOlsen AJAX и COMET 5 18.11.2009 11:23
Prototype + Ajax - не работает в IE, FF. silvek Prototype & script.aculo.us 0 30.08.2008 15:06