javascript - 第二次点击后 Jquery 触发

Question

我正在处理 .NET MVC，我正在尝试在单击 div 后播放 iframe 视频。

HTML

   <div class="entry-post" >

    <h3 class="entry-title" style="cursor:pointer"  onclick="$.Sakla.al('@("ifr"+item.Id)','@item.Link')" >

     @item.Baslik <img src="~/Content/img/com.png" /> </h3>

    <div class="entry-content" >

        <iframe id="@("ifr"+item.Id)" width="560" height="315" frameborder="0" allowfullscreen></iframe>
    </div>
    <hr />
</div>

JS

<script type="text/javascript">
    $(document).ready(function ($) {

        $(".entry-content").hide('slow');

        $(".entry-title").click(function () {

            $(this).parent().children(".entry-content").show(500);
            $.Sakla = {

            al: function (gelenifr,gelenlink) {
                //alert(gelenifr + gelenlink);
                var ifr = $('#'+gelenifr+'');
                    ifr.toggle(function () {
                        if (ifr.is(':visible')) ifr.attr('src', ''+gelenlink+'');
                        else ifr.attr('src', '')
                    })

            }
        }

        });

    });

</script>

所有这些都是我到目前为止所做的。它仅在第二次单击 div 后才起作用。那么，我应该想出什么？

Answer 1

发生这种情况是因为您为 ".entry-title" 设置了两个事件处理程序。

一个是在 HTML 中内联:

onclick="$.Sakla.al('@("ifr"+item.Id)','@item.Link')"

并且正在document.ready回调中设置一个:

$(".entry-title").click(function () {

正如 @Sasang 指出的那样，如果我们查看 document.ready 回调，我们可以看到这是 $.Sakla 的位置正在定义中，因此 onclick 处理程序只有在单击之后才会工作。

不应使用内联 HTML 事件处理程序(onclick、onmouseover 等)。而是使用 object.addEventListener() 或使用 JQuery 在纯 JavaScript 中注册您的事件处理程序:object.on("eventName", callback)