[英]click function is not working in jquery if an alert function is not before it
i have created a preview playlist using ng-repeat, but click function on preview image is not working properly. 我已经使用ng-repeat创建了预览播放列表,但是预览图像上的点击功能无法正常运行。 here is my HTML code:
这是我的HTML代码:
<div class="imgBox" ng-repeat="playlist in channelItems.slice(0,5)" ng-click="onPreviewClick($index)" id="imgFB{{$index}}">
<img id="preview" class="imgthumbnew" ng-src="{{playlist.ImageURL}}" data-item="{{playlist.MediaUrl}}" />
<span>
<label style="font-size: 12px; ">{{playlist.Title}}</label>
</span>
</div>
here is my JS: 这是我的JS:
$(document).ready(function () {
//alert("clicked");
setTimeout(function () {
$(".imgthumbnew").click(function () {
$("#mediaPlayerDiv").show();
$("#thumbnail").hide();
$("#media-video").attr({
"src": $(this).data("item"),
"autoplay": "autoplay",
//"data-tag": "true"
})
})
}, 500);
});
First you approach of using angularjs and jQuery like this is not proper, use proper ng-click handler to register your click handler 首先,您不喜欢使用angularjs和jQuery这样的方法,请使用适当的ng-click处理程序注册您的单击处理程序
<div class="imgBox" ng-repeat="playlist in channelItems.slice(0,5)" ng-click="onPreviewClick($index)" id="imgFB{{$index}}">
<img id="preview" class="imgthumbnew" ng-src="{{playlist.ImageURL}}" ng-click="imgthumbnewclick()" />
<span>
<label style="font-size: 12px; ">{{playlist.Title}}</label>
</span>
</div>
then 然后
$scope.imgthumbnewclick = function (playlist) {
$("#mediaPlayerDiv").show();
$("#thumbnail").hide();
$("#media-video").attr({
"src": playlist.MediaUrl,
"autoplay": "autoplay",
//"data-tag": "true"
})
}
Another solution is to use event delegation to support dynamic elements 另一个解决方案是使用事件委托来支持动态元素
jQuery(function ($) {
$(document).on('click', '.imgthumbnew', function () {
$("#mediaPlayerDiv").show();
$("#thumbnail").hide();
$("#media-video").attr({
"src": $(this).data("item"),
"autoplay": "autoplay",
//"data-tag": "true"
})
})
});
// you can call click event on id easily
$(document).ready(function () {
//alert("clicked");
setTimeout(function () {
$("#preview).click(function () { // use this line
//$(".imgthumbnew").click(function () {
$("#mediaPlayerDiv").show();
$("#thumbnail").hide();
$("#media-video").attr({
"src": $(this).data("item"),
"autoplay": "autoplay",
//"data-tag": "true"
})
})
}, 500);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.