Jquery нажмите оленью кожу события работы

Question

Click событие не работает ... использовать Угловые с Jquery, есть несколько событий, щелкни в файле, но это один частность не работает

<ul class="phone-tumbs"> 
    <li ng-repeat="img in phone.images" class="additionalImgs"> 
     <img ng-src="{{img}}" alt="possible images" /> 
    </li> 
</ul> 


<script> 
    $(document).ready(function() { 

     $(".additionalImgs").click(function() { 
      $(this).fadeOut(); 
     }); 

    }); 
</script> 

Answer 1

Я хотел бы сделать это "угловой путь":

<ul class="phone-tumbs"> 
    <li ng-repeat="img in phone.images" ng-class="{fadedout: img.fadedout}" ng-click="img.fadedout = true"> 
     <img ng-src="{{img}}" alt="possible images" /> 
    </li> 
</ul> 

В вашем CSS

li{ 
transition: opacity .5s; 
} 

.fadedout{ 
opacity: 0; 
} 

Или на самом деле использовать нг-шоу и нг-одушевленные: http://www.nganimate.org/

Answer 2

ли работа, если вам попробуйте это так?

$(document).ready(function(){ 

    $(".phone-tumbs").on('click', '.additionalImgs',function(){ 
     $(this).fadeOut(); 
    }); 

}); 

Answer 3

Я просто столкнулся с этой проблемой.

Ваш код хорошо, see this fiddle

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

Это можно увидеть, запустив функцию jQuery прямо над вашей функцией щелчка. Вы увидите, что длина 0.

console.log($(".additionalImgs")); 

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

К сожалению, это область, в которой угловой не справляется очень хорошо. Вы можете узнать больше об этом в this feature request

Первое, что я всегда стараюсь использовать $ timeout. Он не ждет до конца цикла дайджеста огня его код обратного вызова, даже если вы оставите время пустого

$timeout(function(){ 
    $(".additionalImgs").click(function() { 
      $(this).fadeOut(); 
    }); 
}); 

Этот блог имеет красивое решение, создавая директиву, что пожары обратного вызова, когда последние нг-повтор элемент был визуализирован. http://www.nodewiz.biz/angular-js-final-callback-after-ng-repeat/

Простым решением этой проблемы является использование ng-click на вашем ng-repeat элемента.

<li ng-repeat="img in phone.images" ng-click="somefunction();" class="additionalImgs">