Question

我正在从已经加载的元素（按钮）中点击加载Ajax div，但是当加载了Ajax div时，jQuery脚本没有运行。

该脚本全部在Wordpress中运行，因此有一个noConflict包装器。

示例代码中包含了几种摆脱Ajax div容器中加载的div的方法，仅仅是因为我不确定我的语法是否正确或者脚本是否正在加载。

在jQuery脚本的事件序列中，它确实要求播放video元素，但不会只运行，但如果元素不存在则不执行任何操作？或者，当没有video元素时，这会破坏脚本吗？

打开src不是.m4v的Ajax容器后出现chrome控制台错误：

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>

Answer 1

尝试使用所有点击侦听器

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

例如

 $(document).on('click','.closeUp',function(){          $("#fold-above").empty().fadeToggle();
        });

Answer 2

您需要显示示例HTML $（ '视频'）得到（0）.play（）;

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

如果您在页面中动态创建视频标记，我建议您了解jQuery live（）函数。 http://api.jquery.com/live/

加载Ajax div不执行jQuery脚本

2 个答案: