Функция jQuery циклическая или неконвертированная

Question

Моя основная функция здесь отображает всплывающее окно при нажатии на изображение и позволяет просматривать список друзей и свопировать текущее изображение на странице с помощью одного из всплывающего окна. Сделка работает нормально, но моя функция, кажется, срабатывает несколько раз - я знаю это, потому что переменная d отображается в консоли несколько раз. При первом использовании он появляется один раз. На втором, он отображается дважды и т. Д.

Я предполагаю, что это имеет какое-то отношение к $ ('# friendlist li'). Нажмите функцию внутри основного цикла и что она либо не «выключается» «как только изображение будет заменено, или что-то делать с переменной областью.

$('img[name=pop]').click(function(e) { 
     //pop up 
    var p = $(this); 
    var position = p.position(); 
    var offset = p.offset(); 
    $('#friendlist').css("left", position.left + $(this).width()); 
    $('#friendlist').css("top", 0); 
    $('#friendlist').toggle(); 
    //console.log(this); 
    //console.log(position.top + " " + offset.top + " " + e.pageY);  

     //listener for the friendslist, retrieves the uid of the friend chosen 
    var pointer = $(this).attr("id"); 
    var c = 0; 
    console.log("before c: " + c); 
    $('#friendlist li').click(function(){ 
     var d = 0; 
     console.log("inner d: " + d); 
     if(d < 1){ 
      pictureReplace(pointer , $(this).attr("id")); //function that swaps the img 
      $('#friendlist').hide(); 
      d++; 
     } 
    }); 
}); 

Вот основной HTML для страницы:

<div id="main_page"> 

<div> 
    <img src="https://graph.facebook.com/<?php echo $friendList[0]['id']; ?>/picture" name="pop" id="friend1" /> 
    <?php echo $friendList[0]['name']; ?> 
</div> 

<div> 
    <img src="img/<?php echo $friendList[1]['id']; ?>" name="pop" id="friend2" /> 
    <?php echo $friendList[1]['name']; ?> 
</div> 

<div> 
    <img src="img/<?php echo $fb_me['id']; ?>" /> 
    <?php echo $me['name']; ?> 
</div> 

<div> 
     <img src="img/<?php echo $friendList[2]['id']; ?>" name="pop" id="friend3" /> 
     <?php echo $friendList[2]['name']; ?> 
</div> 

<?php //create the friends list for the search ?> 
<div id="friendlist"> 
    <div>People</div> 
    <input type="text" id="fsearch" name="fsearch" class="" /> 
    <ul id="friends_ul"> 
    <?php 
     $li_num = 1; 
     foreach($friendList as $key => $val){ 
    ?> 
     <li id="li_id_<?php echo $li_num; ?>"> 
      <img src="img/<?php echo $val['id']; ?>" />  
      <label><?php echo $val['name']; ?></label> 
      <input type="hidden" name="hiddenid" value="<?php echo $val['id']; ?>"> 
     </li>  
    <?php 
     $li_num++; 
    } 
    ?> 
    </ul> 
</div> 
</div> 

Answer 1

Всякий раз, когда вы нажимаете на изображение, вы добавляете новый обработчик событий $('#friendlist li').

Я быстро исправить бы unbind^[docs] существующий обработчик перед добавлением нового:

$('#friendlist li').unbind('click').click(... 

я бы, вероятно, связать обработчик только раз, используйте общую переменную и event delegation (я не очень понять, что ваши c и d переменные делают, так что я удалил их):

(function() { 
    var pointer, 
     $friendlist = $('#friendlist'); 


    $('img[name="pop"]').click(function() { 
     //pop up 
     var $p = $(this), 
      position = $p.position(), 
      offset = $p.offset(); 

     $friendlist.css({ 
      left: position.left + $p.width(), 
      top: 0 
     }).toggle(); 

     pointer = this.id; 
    }); 

    $friendlist.delegate('li', 'click', function() { 
     pictureReplace(pointer, this.id); //function that swaps the img 
     $friendlist.hide(); 
    }); 

}()); 

Также отметим, что name есть not a valid attribute for image elements. Я бы использовал класс, чтобы вы могли выбирать элементы с помощью $("img.pop").