Javascript - Verwenden von Rückgabe in Funktion beendet nicht Funktion

Question

Ich bin dabei, meinen eigenen HTML5-Videoplayer zu erstellen und es als wiederverwendbares jQuery-Plugin zu packen. Ich muss eine Funktion teilweise beenden, denn wenn ich play drücke, würde der Spieler spielen und dann pausieren, wenn es eine ungerade Anzahl von Malen gibt, nach denen ein Spieler danach erstellt wird.

HTML Controlset Markup (Dies wird eingefügt mit Javascript)

<div class="meo"> 
    <video> 
     <source src="example.mp4"> 
     <source src="example.webm"> 
    </video> 
    <ul> 
     <li class="playp"></li> <!-- Ignore everything between here --> 
     <li class="ctime"></li> 
     <li class="progr"> 
      <div class="progb"></div> 
     </li> 
     <li class="ttime"></li> 
     <li class="fs"></li> <!-- and here --> 
    </ul> 
</div> 

Javascript

$.fn.meo = function() { 
    return this.each(function() { 
     var vid = $(this); 
     var playp = $(".meo .playp"); 
     vid.wrap('<div class="meo"></div>'); 
     vid.after('<ul><li class="playp"></li><li class="ctime"></li><li class="progr"><div class="progb"></div></li><li class="ttime"></li><li class="fs"></li></ul>'); 

     $.fn.handlePlay = function() { 
      var video = $(this).parent().siblings().get(0); // Getting the correct video element 
      alert(video); // To show value of "video" (Returns multiple times depending on how many of the controlsets as above are found (This is not what I want)) 
      if (video.paused || video.ended) { // Testing if the video is playing 
       video.play(); // After this I want to prevent the rest of the function executing 
       return; 
      } else { 
       video.pause(); 
       return; // Terminate function 
      }; 
     }; 

     playp.click(function(e) { 
      $(this).handlePlay(); 
     }); 
    }); 
}); 

Bitte helfen. Vielen Dank!

Answer 1

playp.click(function(e) { 
    $(this).handlePlay(); 
}); 

Das wird jedes Mal $.each() Iterierten einen Click-Ereignishandler einzurichten. Dies bedeutet, dass handlePlay() mehrmals aufgerufen wird, obwohl Sie nur einmal auf ein Element klicken.

Entweder eine delegierte Ereignishandler verwenden oder das neu erstellte Element verwenden nur den Event-Handler anhängen

Tragene Ereignis: ein statisches übergeordnetes Element verwenden, um die Ereignishandler

$(document).on("click",".meo .playp",function(){ 
    $(this).handlePlay(); 
}); 
$.fn.meo = function() {...}; 

Oder setzen Sie die anzuwenden Veranstaltung auf das neu erstellte Element selbst

vid.find(".playp").click(function(){ 
    $(this).handlePlay(); 
}); 

auch brauchen Sie nicht $.fn.handlePlay jedes Mal inerstellenentweder, so dass man es außerhalb bewegen kann.