Можно ли зарегистрировать событие клика по определенному условию?

0

Предположим, у вас есть страница динамического профиля. Когда пользователь нажимает кнопку редактирования, некоторые div на странице становятся функциональными. Например, когда пользователь нажимает на div, с ним что-то происходит.
Поэтому я использую событие JQuery Click() для этих div. Но я хочу только зарегистрировать это, когда страница находится в режиме редактирования. В настоящее время у меня есть что-то вроде этого:

$(".someClass").click(function() {
    if(editMode) {
        //do stuff
    }
});

Но разве это не является неэффективным? Поскольку он регистрирует событие клика, даже если оно не находится в editMode. То, что я хотел бы достичь, это что-то вроде:

if(editMode) {
    $(".someClass").click(function() {
        //do stuff
    });
}

Очевидно, это не сработает. Есть ли лучший способ достичь этой цели?

  • 1
    почему вы говорите, что вторая версия не работает
  • 0
    за исключением того, что вам придется удалить обработчик, если условие не выполняется - если оно уже добавлено (посмотрите на .off() и пространства имен событий)
Показать ещё 2 комментария
Теги:

5 ответов

3
Лучший ответ

В то время, когда вы переходите в режим редактирования, вы можете привязать все обработчики. Затем, когда пользователь покидает режим редактирования, вы можете отпереть их с помощью:

$(".someClass").off("click");
Поделиться
0

У вас много проблем

синтаксическая ошибка в function AnimateTile(id, z, w, h, now = true) {, вы можете сделать это вместо чего-нибудь вроде

function AnimateTile(id, z, w, h, now) {
    now = now == undefined ? true : now;

то обработчик редактирования должен находиться в обработчике кликов, потому что всякий раз, когда значение edit изменяется, вам нужно либо добавить обработчик, либо удалить его.

$(".bigtile").click(function (event) {
    edit = !edit;
    if (edit) $(this).css("background-color", "red");
    else $(this).css("background-color", "green");
    if (edit) {
        $(".tile").on('click.edit', function (event) {
            clicked = !clicked;
            if (clicked) {
                switch ($(this).attr('id')) {
                    case "tile1":
                        AnimateTile("tile1", 100, 210, 210);
                        break;
                    case "tile2":
                        AnimateTile("tile2", 100, 210, 210);
                        break;
                    case "tile3":
                        AnimateTile("tile3", 100, 210, 210);
                        break;
                    case "tile4":
                        AnimateTile("tile4", 100, 210, 210);
                        break;
                    default:
                        break;
                }
            } else {
                switch ($(this).attr('id')) {
                    case "tile1":
                        AnimateTile("tile1", 0, 100, 100, false);
                        break;
                    case "tile2":
                        AnimateTile("tile2", 0, 100, 100, false);
                        break;
                    case "tile3":
                        AnimateTile("tile3", 0, 100, 100, false);
                        break;
                    case "tile4":
                        AnimateTile("tile4", 0, 100, 100, false);
                        break;
                    default:
                        break;
                }
            }
        });
    } else {
        $(".tile").off('click.edit');
    }

});

Демо: скрипка

Также читайте пространство имен событий и .off()

Поделиться
0

Вы можете сделать это, но используя .on()

if(editMode) {
    $(document).on('click', ".someClass", function() {
        //do stuff
    });
}

то вы можете отсоединить этот обработчик событий, используя .off()

$(".someClass").off("click");
Поделиться
  • 1
    Но это не удаляет обработчики, когда он выходит из режима редактирования.
  • 0
    @ Barmar Я думал, что Op хочет прикрепить событие, основанное на условии, затем я планировал добавить детали об отключении его с помощью прикрепления обработчика события .off (). Буду редактировать мой ответ.
0

Добавьте класс, например: "редактировать" в контейнере в режиме редактирования, удалите его, если нет.

$(document).on('click', ".edit .someClass", function() {
   //do stuff
});
Поделиться
0

Мое предложение таково:

  1. Добавьте класс в ваше состояние к целевому элементу
  2. сделать обработчик клика для этого имени класса с .on() метода .on()
if(editMode) {
   $(".someClass").addClass('editable');
}

$(".someClass closest static parent elem").on('click', '.editable', function() {
    //do stuff
});

заметка:

$(".someClass closest static parent elem")

вы можете изменить его также на $(document) но лучше использовать ближайший статический родительский элемент к этому целевому элементу.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню