我已经使用 ng-repeat 创建了一个预览播放列表,但是预览图像上的点击功能无法正常工作。 这是我的 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>
这是我的 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);
});
最佳答案
首先你像这样使用 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>
然后
$scope.imgthumbnewclick = function (playlist) {
$("#mediaPlayerDiv").show();
$("#thumbnail").hide();
$("#media-video").attr({
"src": playlist.MediaUrl,
"autoplay": "autoplay",
//"data-tag": "true"
})
}
另一种解决方案是使用事件委托(delegate)来支持动态元素
jQuery(function ($) {
$(document).on('click', '.imgthumbnew', function () {
$("#mediaPlayerDiv").show();
$("#thumbnail").hide();
$("#media-video").attr({
"src": $(this).data("item"),
"autoplay": "autoplay",
//"data-tag": "true"
})
})
});
关于javascript - 如果警报功能不在点击功能之前,则点击功能在 jquery 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22397873/