2017-05-05 7 views
1

.NET MVCで作業していますが、divをクリックしてiframe動画を再生しようとしています。2回目のクリック後のJqueryの起動

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の2回目のクリック後にのみ機能します。それで、私は何を思いつくのですか?

答えて

3

これは、".entry-title"に2つのイベントハンドラが設定されているために発生しています。我々はdocument.readyで見れば、ポイントアウト

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

@Sasang として:

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

そして、もう一つはdocument.readyコールバックに設定されている:

一つは、HTMLのインラインですこれが$.Saklaが定義されている場所であることがわかります。したがって、onclickハンドラは、クリック後に機能しません。

インラインHTMLイベントハンドラ(onclickonmouseoverなど)は使用しないでください。代わりに、純粋なJavaScriptでobject.addEventListener()またはJQueryでイベントハンドラを登録してください:object.on("eventName", callback)

+0

また、2クリックの理由は、 '$ .Sakla.al'が最初のクリックの後でのみ定義されるためです。 – Sasang

+0

はい。私はそれを追加します。 –

+0

ご返信ありがとうございます。私はJsが良くない。だから、私は何をすべきですか? – Quicksilver

関連する問題