JQuery делегат проблема

Question

Это мой первый вопрос о SO, так что, если он кажется за гранью глупости, пожалуйста, не беспокойтесь обо мне.У меня есть страница со списком картинок со ссылками для удаления под ними и с возможностью добавления других картинок.После каждого из этих событий (которое загружается #user_gallery, как показано ниже, я должен дважды щелкнуть ссылку удаления, чтобы оно заработало. Почему это так?

$('body').delegate(".delete", "click", function(e){
        $('.delete').click(function(ev){
           var pic_id = $(this).attr('id').replace('pic_', '') ;
           $.post(   'unpublish_pics.php',
                     {pic: pic_id, action:'delete'},
                     function(data)
                     {                            
                            $('#user_gallery').load("pictures_display.php");
                     },"json"
                 );
           ev.preventDefault();
        });
        e.preventDefault();
   });

HTML-код выглядит примерно так:.

<div id="user_gallery">    
<div class="image">
   <a rel="gallery" class="img" href="pic.png"><img src="pic.png"></a>
    <a id="pic_1" class="ui-state-default ui-corner-all delete" href="#">Delete</a>
</div>

Answer 1

Вам не нужен .click() обработчик / обертка внизу, просто .delegate() вот так:

$('body').delegate(".delete", "click", function(e){
  var pic_id = $(this).attr('id').replace('pic_', '');
  $.post('unpublish_pics.php', {pic: pic_id, action:'delete'}, function(data) {                            
    $('#user_gallery').load("pictures_display.php");
  },"json");
  e.preventDefault();
});

В настоящее время выпривязка обработчика .click() к следующему щелчку ... если вы хотите выполнить действие при нажатии, просто поместите код прямо в обработчик .delegate().