无法使事件侦听器正常工作

Question

我有一个事件侦听器，我正试图让它工作，但似乎无法运行。我有一个onclick设置，它切换div的类，提示webkit转换。当转换结束时，我希望jquery将一个外部页面加载到div中，但它永远不会加载它

<script type="text/javascript">
function fullscreen_slider_load() {
var fullscreen = document.getElementById("fullscreen");
function fullscreen_done1() {
    console.log("done called");
    fullscreen.removeEventListener("webkitTransitionEnd", fullscreen_done1);
    fullscreen.addEventListener("webkitTransitionEnd", fullscreen_done2);
    $(function fullscreen_load() {
    $('#fullscreen')
       .html('<img src="http://www.klossal.com/loader.gif"/>')
       .load('http://www.klossal.com/portfolio/space_fullscreen.html');
});

function fullscreen_done2() {
    fullscreen.removeEventListener("webkitTransitionEnd", fullscreen_done2);
};
</script>

我不知道为什么它没有加载，但如果我能在这方面得到任何帮助，我将不胜感激。

Answer 1

您的这部分代码对我来说毫无意义，而且看起来与您所说的不一致。此外，你发布的代码似乎没有适当的支撑：

$(function fullscreen_load() {
$('#fullscreen')
   .html('<img src="http://www.klossal.com/loader.gif"/>')
   .load('http://www.klossal.com/portfolio/space_fullscreen.html');
});

如果我理解这一点，它将设置一个document.ready()事件处理程序，用于将新内容加载到#fullscreen中。我认为这不是你想要的。

我也没有看到您在哪里添加触发fullscreen_done1()的事件侦听器，也没有看到fullscreen_done2()事件侦听器的任何原因，因为这里没有使用它。

如果你只想在第一次CSS转换完成时让全屏对象加载一些新内容，并且你已经在其他地方注册了将调用fullscreen_done1()的事件侦听器，你可以使用这个（固定缩进和支撑）：

<script type="text/javascript">
function fullscreen_slider_load() {
    var fullscreen = document.getElementById("fullscreen");
    function fullscreen_done1() {
        console.log("done called");
        fullscreen.removeEventListener("webkitTransitionEnd", fullscreen_done1);
        fullscreen.addEventListener("webkitTransitionEnd", fullscreen_done2);
        $(fullscreen)
           .html('<img src="http://www.klossal.com/loader.gif"/>')
           .load('http://www.klossal.com/portfolio/space_fullscreen.html');
    }
    function fullscreen_done2() {
        fullscreen.removeEventListener("webkitTransitionEnd", fullscreen_done2);
    }
}
</script>

如果你试图做一些比这更复杂的事情，那么请澄清在第一次过渡结束后你还想做什么。

附言：如果不在函数声明下缩进代码，则很容易误解代码的意图。

您的代码也无法在Firefox或Opera（支持CSS3转换的非webkit浏览器）中工作。