既に読み込まれている要素 (ボタン) 内からのクリックで Ajax div を読み込んでいますが、その Ajax div が読み込まれると、jQuery スクリプトが実行されません。
スクリプトはすべて Wordpress 内で実行されるため、noConflict ラッパーがあります。
サンプル コードには、Ajax div コンテナー内に読み込まれた div を削除するいくつかの方法が含まれています。これは、単に構文が正しいかどうか、またはスクリプトが読み込まれていないだけかどうかわからないためです。
jQuery スクリプトの一連のイベントでは、要素を再生するように要求されますがvideo、要素がそこにない場合、それは実行されるだけで何もしないでしょうか? videoそれとも、要素がないときにスクリプトを壊しているのはこれですか?
srcではないAjax コンテナーを開いた後の chrome コンソール エラー.m4v:
Uncaught TypeError: Cannot call method 'play' of undefined
<script type="text/javascript">
// design and manage behavior of video/audio control bar
jQuery(function($){
$(document).ready(function() {
$.ajaxSetup({ cache: false });
var video = document.getElementById("postvideo");
var playButton = document.getElementById("play-pause");
var muteButton = document.getElementById("mute");
var fullScreenButton = document.getElementById("full-screen");
var seekBar = document.getElementById("seek-bar");
// remove media player elements if element is not an m4v
$('#postvideo[src$=".jpg"]').remove(".controlbar").remove(".postMedia");
$('#postvideo[src$=".m4v"]').remove(".controlbar");
// elements whose src doesn't end with `.m4v`
$('#postvideo').not('[src$=".m4v"]').empty().each(function() {
if ($('.postMedia').length) {
// move postMedia to root of #fold-above
$('.postMedia').detach().prependTo($('#fold-above'));
$('video').get(0).play();
} else {
$('.controlbar').remove();
$('.postMedia').remove();
}
});
// button to show or hide the post text content
$(".showText").click(function(){
$(".ajaxPostText").fadeToggle('fast');
$(".ajaxPostTitle").fadeToggle('fast');
$(".aboveTheFold .postmetadata").fadeToggle('fast');
$(".controlbar").fadeToggle('fast');
});
// button to close entire post viewer panel
$('.closeUp').click(function(){
$("#fold-above").empty().fadeToggle();
});
$(".play-pause").click(function(){
if (video.paused == true) {
video.play();
playButton.innerHTML = "<img src='<?php echo get_template_directory_uri(); ?>/media/playButton.png' />";
} else {
video.pause();
playButton.innerHTML = "<img src='<?php echo get_template_directory_uri(); ?>/media/pauseButton.png' />";
}
});
$(".mute").click(function(){
if (video.muted == false) {
video.muted = true;
muteButton.innerHTML = "<img src='<?php echo get_template_directory_uri(); ?>/media/volumeButton2.png' />";
} else {
video.muted = false;
muteButton.innerHTML = "<img src='<?php echo get_template_directory_uri(); ?>/media/volumeButton1.png' />";
}
});
$(".full-screen").click(function(){
if (video.requestFullscreen) {
video.requestFullscreen();
} else if (video.mozRequestFullScreen) {
video.mozRequestFullScreen(); // Firefox
} else if (video.webkitRequestFullscreen) {
video.webkitRequestFullscreen(); // Chrome and Safari
}
});
seekBar.addEventListener("change", function() {
var time = video.duration * (seekBar.value / 100);
video.currentTime = time;
});
video.addEventListener("timeupdate", function() {
var value = (100 / video.duration) * video.currentTime;
seekBar.value = value;
});
});
});
</script>