두 번째 클릭 후 Jquery가 실행됩니다.

Question

.NET MVC에서 작업하고 div (s)를 클릭 한 후 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"에 설정되어 있기 때문에 이러한 현상이 발생합니다. 우리가 document.ready에서 보면, 점 밖으로

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

@Sasang 로 :

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

그리고 하나가 document.ready 콜백에서 설정되는 :

하나는 HTML에서 인라인 콜백을 사용하면 여기에 $.Sakla이 정의되어 있으므로 onclick 핸들러는 클릭 한 후에 작동하지 않습니다.

인라인 HTML 이벤트 핸들러 (onclick, onmouseover 등) 사용하지 않아야합니다. 대신 object.addEventListener() 또는 JQuery와 함께 순수 자바 스크립트로 이벤트 핸들러를 등록 : object.on("eventName", callback)