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

0

У меня возникла проблема с нежелательной функцией множественного вызова после загрузки динамического содержимого.

HTML

<div class="wrap">
  <a href="javascript:;" class="addNewImage">add new image</a><br /><br /><br />
  <div id="fancyDIV">
      <a tabindex="1" rel="group" href="#" class="fancyLink" title="title 01"><img src="http://www.picssel.com/playground/jquery/images/01t.jpg" alt="t1" /><span>number1</span></a>
      <a tabindex="1" rel="group" href="#" class="fancyLink" title="title 02"><img src="http://www.picssel.com/playground/jquery/images/02t.jpg" alt="t1" /><span>number2</span></a>
  </div>
</div>

JS

$("#fancyDIV").on("focusin", function(){    
    $('span').on('click', function(e) {
        alert(0);
    });
}); // on 

var $indice = 3;
$("a.addNewImage").click(function(){
     if ($indice > 8) {
        alert('sorry, there are no more images to add'); return false;
     }else{ 
        $("#fancyDIV").append('<a tabindex="1" rel="group" href="#" class="fancyLink"><img src="http://www.picssel.com/playground/jquery/images/0'+$indice+'t.jpg" alt="thumb'+$indice+'" /><span>number'+$indice+'</span></a>');
        $indice++;
    }
});

JSfiddle

Если сразу после загрузки я нажимаю на диапазон, предупреждение появляется только 1 раз, правильно.

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

Но если я добавлю более динамические изображения, и я нажимаю на любой из предыдущих интервалов, это предупреждение появляется мне несколько раз. Этого не может быть, потому что в конечном итоге на этом этапе вместо предупреждения отправьте запрос ajax. И отправляет мне десятки одинаковых запросов.

Я бы хотел, чтобы это предупреждение появилось только один раз, независимо от того, сколько я добавлю новые фотографии. Может ли это быть?

Изменить (что мне нужно): я хочу динамически загружать компонент и иметь возможность нажимать на него, чтобы отправить запрос ajax.Normally, это будет работать только для тех элементов, которые загружаются в начале, поскольку те, которые добавлены динамически, не работают. Я смог сделать это с помощью focusIn, но к тому времени запрос ajax отправляется столько раз, сколько я нажимаю, чтобы добавить новый элемент. Но я хочу отправить запрос только один раз.

  • 0
    Каждый раз, когда вы сосредотачиваетесь на этом div, все они получают дополнительные события щелчка. Это то, что он должен делать с кодом, который вы написали. Что ты хотел вместо этого сделать?
  • 0
    Так как же это сделать правильно?
Показать ещё 3 комментария
Теги:

1 ответ

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

Вы никогда не хотите иметь вложенные вызовы .on подобное. Если вы удалите внешний, $("#fancyDIV"), то это почти правильный способ сделать это.

Причина, по которой это не совсем работает, заключается в том, что обработчик задан до создания элементов. Это означает, что обработчик не установлен на этих элементах.

Вокруг этого есть два пути. Вы можете добавить обработчик к новым элементам, когда они будут созданы. Лично я предпочел бы другой путь, который должен добавить обработчик к некоторому элементу предка, но установить его для работы на потомках, соответствующих определенному CSS-селектору. (Это использует так называемую "пузырьковую" функцию обработки событий DOM.) Например:

$('#fancyDiv').on('click', 'span', function(e) {
    alert(0);
});

Это запустит обработчик, когда будет #fancyDiv любой элемент <span> внутри #fancyDiv.

Кстати, было бы разумно использовать CSS-классы или что-то еще, так как существует риск того, что больше элементов <span> могут быть добавлены в код позже.

Поделиться
  • 0
    Ты гений. Я был убежден, что если я хочу что-то сделать с элементом, добавляемым динамически, я должен использовать «on ()» перед моим настоящим on ().

Ещё вопросы

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