Question

我有一个div。这个div中有一个按钮可以清空div并用新内容填充它。

问题在于，当div填充了新内容时，我无法在填充此div的任何元素上调用click（）函数。我做错了什么？

代码块一直到底是有问题的。

$(document).ready(function(){
        function newGame(){
            //Empty the game window of contents.
            $('#previewWindow').empty();

            //Add the following HTML to the game window.
            $('#previewWindow').append("<div id='spriteBox' align='center'><img id='sprite1' src='images/sprites/172(noSelect).png' border='0'/><img id='sprite2' src='images/sprites/88(noSelect).png' border='0' /><img id='sprite3' src='images/sprites/196(noSelect).png' border='0' /><div id='info' align='center'>TEST</div></div>");

            //Hover effects for Sid's character.
            $('#sprite1').hover(function(){$(this).attr('src', 'images/sprites/172.png');$('#crumbling').get(0).play();},function(){$(this).attr('src','images/sprites/172(noSelect).png');}
            );

            //Hover effects for Grim's character.
            $('#sprite2').hover(function(){$(this).attr('src', 'images/sprites/88.png');$('#crumbling').get(0).play();},function(){$(this).attr('src', 'images/sprites/88(noSelect).png');}
            );

            //Hover effects for Falas's character.
            $('#sprite3').hover(function(){$(this).attr('src', 'images/sprites/196.png');$('#crumbling').get(0).play();},function(){$(this).attr('src','images/sprites/196(noSelect).png');}
            );
        };

        //Execute the following code block if New Game is clicked.
        $('#newGame').click(function(){
            newGame();
        });

        //Execute the following code block if Sid is clicked.
        $('#sprite1').click(function(){
            alert('Hello');
        });
    });

Answer 1

因为您已将点击处理程序直接附加到div内的按钮。

重新加载div内容时，您将获得没有单击处理程序的新按钮。

您希望此时使用事件委派，这意味着您将处理程序附加到内容div，因此它们在清空时不会丢失。

我假设您的内容div为"previewWindow" 所以这是你如何进行事件授权：

    $('#previewWindow').on('click','#newGame',function(){
        newGame();
    });

    //Execute the following code block if Sid is clicked.
    $('#previewWindow').on('click','#sprite1',function(){
        alert('Hello');
    });

它的基本含义是，只要您在#previewWindow的任何元素上点击id="newGame"，它就会调用新游戏。

Answer 2

在之后添加数据时，您注册了一个点击事件，点击事件将不适用于您注册后的数据。

要解决此问题，您可以使用jQuery("#container").on(event, selector, handler(event))方法在尚未添加的元素上注册事件。

$('#previewWindow').on('click', '#sprite1', function(){ alert('Hello'); });

Answer 3

将$('#sprite1').click()事件放入newGame()功能：

$(document).ready(function(){
    function newGame(){
        //Empty the game window of contents.
        $('#previewWindow').empty();

        //Add the following HTML to the game window.
        $('#previewWindow').append("<div id='spriteBox' align='center'><img id='sprite1' src='images/sprites/172(noSelect).png' border='0'/><img id='sprite2' src='images/sprites/88(noSelect).png' border='0' /><img id='sprite3' src='images/sprites/196(noSelect).png' border='0' /><div id='info' align='center'>TEST</div></div>");

        //Execute the following code block if Sid is clicked.
        $('#sprite1').click(function(){
            alert('Hello');
        });

        //Hover effects for Sid's character.
        $('#sprite1').hover(function(){$(this).attr('src', 'images/sprites/172.png');$('#crumbling').get(0).play();},function(){$(this).attr('src','images/sprites/172(noSelect).png');}
        );

        //Hover effects for Grim's character.
        $('#sprite2').hover(function(){$(this).attr('src', 'images/sprites/88.png');$('#crumbling').get(0).play();},function(){$(this).attr('src', 'images/sprites/88(noSelect).png');}
        );

        //Hover effects for Falas's character.
        $('#sprite3').hover(function(){$(this).attr('src', 'images/sprites/196.png');$('#crumbling').get(0).play();},function(){$(this).attr('src','images/sprites/196(noSelect).png');}
        );
    };

    //Execute the following code block if New Game is clicked.
    $('#newGame').click(function(){
        newGame();
    });

});

Answer 4

另一种选择是

$(document).ajaxComplete(function() {
    $('#sprite1').on('click', function() {
        alert('Hello');
     });
});

jQuery：点击事件中的Click事件

4 个答案: