jQuery:Click事件中的Click事件

我有一个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');
        });
    });

$（文档）.ready（函数（）{
函数newGame（）{
//清空游戏窗口中的内容。
$（“#预览窗口”）.empty（）；
//将以下HTML添加到游戏窗口。
$（“#预览窗口”）。追加（“测试”）；
//Sid角色的悬停效果。
$（'#sprite1'）.hover（function（）{$（this.attr（'src'，'images/sprites/172.png'）；$（'#crumbling'）.get（0.play（）；}，function（）{$（this.attr（'src'，'images/sprites/172（noSelect.png'））；）
);
//格里姆角色的悬停效果。
$（'#sprite2'）.hover（function（）{$（this）.attr（'src'，'images/sprites/88.png'）；$（'#crumbling'）.get（0.play（）；}，function（）{$（this）.attr（'src'，'images/sprites/88（noSelect.png'）；）
);
//法拉斯角色的悬停效果。
$（'#sprite3'）.hover（function（）{$（this.attr（'src'，'images/sprites/196.png'）；$（'#crumbling'）.get（0.play（）；}，function（）{$（this.attr（'src'，'images/sprites/196（noSelect.png'））；）
);
};
//如果单击“新建游戏”，请执行以下代码块。
$（“#新游戏”）。单击（函数（）{
新游戏（）；
});
//如果单击了Sid，则执行以下代码块。
$（'#sprite1'）。单击（函数（）{
警惕（“你好”）；
});
});

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

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

此时您可能希望使用事件委派，这意味着您将处理程序附加到contentdiv，以便在其清空时不会丢失它们

我假设您的内容div是“预览窗口” 下面是您如何进行事件委派：

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

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

它的基本意思是，每当您在任何元素上使用

id=“newGame”

单击内部

#previewWindow

，它将调用新游戏。

当您在注册单击事件后添加数据时，单击事件将不应用于注册后的数据

要解决此问题，可以使用该方法在尚未添加的元素上注册事件

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

将

$（'#sprite1'）放置在
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();
    });

});

$（文档）.ready（函数（）{
函数newGame（）{
//清空游戏窗口中的内容。
$（“#预览窗口”）.empty（）；
//将以下HTML添加到游戏窗口。
$（“#预览窗口”）。追加（“测试”）；
//如果单击了Sid，则执行以下代码块。
$（'#sprite1'）。单击（函数（）{
警惕（“你好”）；
});
//Sid角色的悬停效果。
$（'#sprite1'）.hover（function（）{$（this.attr（'src'，'images/sprites/172.png'）；$（'#crumbling'）.get（0.play（）；}，function（）{$（this.attr（'src'，'images/sprites/172（noSelect.png'））；）
);
//格里姆角色的悬停效果。
$（'#sprite2'）.hover（function（）{$（this）.attr（'src'，'images/sprites/88.png'）；$（'#crumbling'）.get（0.play（）；}，function（）{$（this）.attr（'src'，'images/sprites/88（noSelect.png'）；）
);
//法拉斯角色的悬停效果。
$（'#sprite3'）.hover（function（）{$（this.attr（'src'，'images/sprites/196.png'）；$（'#crumbling'）.get（0.play（）；}，function（）{$（this.attr（'src'，'images/sprites/196（noSelect.png'））；）
);
};
//如果单击“新建游戏”，请执行以下代码块。
$（“#新游戏”）。单击（函数（）{
新游戏（）；
});
});
另一个选择是

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

听起来您需要委派事件。不要忘记ID在文档上下文中必须是唯一的。这会起作用，但仍会导致它多次调用
。click（）
事件处理程序，与方法相比不是最优的。谢谢，谢谢，谢谢，一千次谢谢！反应很快，而且都很有帮助。希望我有足够高的声望来投票给你们所有人。这一条是最清晰、最直接、最容易理解的。我会选择它作为答案，只要它让我（如4分钟左右）。