предотвращение применения эффектов к одному и тому же объекту дважды при добавлении объектов с помощью ajax

Question

У меня небольшая проблема с приложением, которое я делаю. У меня есть страница, где пользователь редактирует документ, перетаскивая модули в страницу или область «холст».

http://thinktankdesign.ca/temp_img.jpg

Когда страница загружена, в javascript модули складываются (как указано выше). Однако после того, как пользователь перетаскивает новый модуль, эффект применяется снова, некоторые новые модули также могут разрушаться. здесь проблема. каждый раз, когда модуль загружается, один и тот же эффект применяется к модулям, которые уже могут сворачиваться. Это заканчивает тем, что ломало их анимацию.

вот код, который выполняется при загрузке страницы.

//make colapsible
$("h1.handle").click(function() {
    var object = $(this);
    v$(this).next().toggle("fast", colapsible_class(object));
    vreturn false;
}).addClass("open");

и вот код, который выполняется при создании модуля через ajax

function get_module(id){
    var template = $('input[name=template]').val();
    $.post(window.location.href, { template: template, module: id, mode: 'create' },
        function(data){
            $(data).insertBefore(".target_wrapper");

            //enable deletion of module
            $(".js_no_modules").slideUp("slow");
            $(enable_module_deletion());

            //show delete button
            $("button[name=delete]").show();

            //make colapsible
            $("h1.handle").click(function() {
                var object = $(this);
                $(this).next().toggle("fast", colapsible_class(object));
                return false;
            }).addClass("open");

        }
    );
}

Мне нужен надежный способ предотвращения двойного применения эффекта переключения к одному и тому же модулю

Answer 1

Используйте взамен jQuery 1.3 живые события .

//make colapsible
$("h1.handle").live("click", function() {
    var object = $(this);
    v$(this).next().toggle("fast", colapsible_class(object));
    vreturn false;
}).addClass("open");

и затем исключите объявление клика во втором блоке кода, изменив его на $("h1.handle").addClass("open");

Живые события связывают все текущие и будущие соответствующие элементы с событием.

Answer 2

Лучший способ решить вашу проблему - вместо использования $("h1.handle") для обратного вызова AJAX перейти на $(data).find("h1.handle"). Что-то вроде

var x = $(data);
x.insertBefore(...);
/* your other code */
x.find('h1.handle').click(...).addClass(...);

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

Если мы хотим ответить на ваш вопрос, а не просто решить вашу проблему, у нас есть несколько альтернатив, таких как:

• сохраните в своих объектах, что обработчик события onclick был установлен так, что вы не можете установить его дважды
• всегда связывает событие onclick , но всегда сначала отменяет привязку
• использовать живые события jQuery, а addClass открывается только для вновь созданных элементов.

ИМО, первый самый простой. Вы можете сделать это, используя jQuery's data () . Тогда вы можете сделать что-то вроде:

$("h1.handle").each(function() {
  var me = $(this);

  // if already has click handler, don't do anything
  if (me.data('click_set') != null) { return true; }
  // otherwise, store the data and bind the click event
  me.data('click_set', true).click(function() {
   /* the code you already have on the click handler */
  }).addClass('open');
}

Второй вариант заключается в сохранении функции, которую вы передаете inline в связыватель событий click, в переменной, а затем с помощью unbind jQuery для ее отключения.

Answer 3

В вашем обработчике успеха Ajax попробуйте следующее:

//make collapsible
        $("h1.handle:not(.open)").click(function() {
            var object = $(this);
            $(this).next().toggle("fast", colapsible_class(object));
            return false;
        }).addClass("open");