0

我正在从已加载的元素（按钮）中单击加载 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>
4

2 回答 2

1

尝试与所有点击监听器一起使用

     $(document).on('click','#your_div',function(){
});

举个例子

 $(document).on('click','.closeUp',function(){          $("#fold-above").empty().fadeToggle();
        });
于 2013-06-01T23:33:39.203 回答
1

您需要显示一个示例 HTML $('video').get(0).play();

如果你的 HTML 代码中没有这个标签，你是否有 <video> 这个标签，$(video) 将未定义，get(0) 未定义，并且在未定义的对象上调用 play 函数将导致您看到的错误。

如果您的视频标签是在页面中动态创建的，我建议您了解 jQuery live() 函数。 http://api.jquery.com/live/

于 2013-06-01T23:38:08.600 回答