如果警报功能不在它之前，则单击功能在 jquery 中不起作用答案

【问题标题】：click function is not working in jquery if an alert function is not before it如果警报功能不在它之前，则单击功能在 jquery 中不起作用
【发布时间】：2014-03-14 15:38:34
【问题描述】：

我使用 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);
     });

【问题讨论】：

检查 DOM 元素的范围。无论是否在范围内
问题在于 ajax 请求时间，@arun p Johny 已经解决了。

标签： javascript jquery angularjs media-queries

【解决方案1】：

首先你使用 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"
    })
}

另一种解决方案是使用事件委托来支持动态元素

jQuery(function ($) {
    $(document).on('click', '.imgthumbnew', function () {
        $("#mediaPlayerDiv").show();
        $("#thumbnail").hide();
        $("#media-video").attr({
            "src": $(this).data("item"),
                "autoplay": "autoplay",
            //"data-tag": "true"
        })
    })
});

【讨论】：

【解决方案2】：

// 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);
 });

【讨论】：

对不起，它根本不起作用，我已经试过了。问题不在于 "ID" 或 "CLASS" 。 @arun p Johny 回答得很好