jQuery - using .prepend()

Question

Я использую jQuery в своем проекте, где у меня возникли проблемы с .prepend(). Пожалуйста, перейдите на страницу http://qlimp.com и войдите в систему, используя это имя пользователя/пароль: dummy/dummy Затем нажмите ссылку Перейдите в Настройки информации. Нажмите кнопку добавить сервис -> затем нажмите значок facebook -> просто нажмите кнопку Добавить

Вы увидите синий facebook тег. Когда вы снова выполните этот процесс, вы увидите три теги facebook (предварительно добавив два тега одновременно) вместо два. Это похоже на то, что в два раза больше нет. предыдущих тегов. Почему это так?

Вот код JQuery:

$("#facebook").click(function(){ 
    $("#facebook-info").fadeIn("slow"); 
    $("#facebook-button").click(function(){ 
     a = a+1; 
     $("#service-sets").prepend('<div class="tag" id="'+a+'"><span class="blue-tag">Facebook<span class="delete-tag"><i class="icon-cancel-circle-1" id="facebook-del"></i></span></span></div>'); 
    }); 
}); 

$("#service-sets").on('click', '#facebook-del', function() { 
    $("#facebook-tag").remove(); 
}); 

HTML

<div id="service-sets"> 
</div> 

Я только что проверил в jsfiddle http://jsfiddle.net/YVZH5/ с кодом образца и он работает (предваряя один тег сразу). Может ли кто-нибудь сказать мне ошибку, которую я сделал?

Спасибо!

Answer 1

Использовать только одно событие click. Вы делаете это для родительского и дочернего элементов.

$("#facebook-button").click(function(){ 
    $("#facebook-info").fadeIn("slow"); 
     a = a+1; 
     $("#service-sets").prepend('<div class="tag" id="'+a+'"><span class="blue-tag">Facebook<span class="delete-tag"><i class="icon-cancel-circle-1" id="facebook-del"></i></span></span></div>');  
}); 

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