javascript Jquery 函数在 Ajax 调用后不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20962471/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery function doesn't work after Ajax call
提问by Saulius s
I've got this function:
我有这个功能：
$(document).ready(function() {
$('.post_button, .btn_favorite').click(function() {
//Fade in the Popup
$('.login_modal_message').fadeIn(500);
// Add the mask to body
$('body').append('<div class="overlay"></div>');
$('.overlay').fadeIn(300);
return false;
});
My page loads content with favourite buttons, but after Ajax call and generated additional new content the function doesn't work when you click new content's buttons. What could be not right?
我的页面加载了带有收藏夹按钮的内容，但是在 Ajax 调用并生成其他新内容之后，当您单击新内容的按钮时，该功能不起作用。什么可能不正确？
回答by Scary Wombat
That is because you are using dynamic content.
那是因为您正在使用动态内容。
You need to change your click call to a delegated method like on
您需要将单击调用更改为委托方法，例如 on
$('.post_button, .btn_favorite').on('click', function() {
or
或者
$("body").on( "click", ".post_button, .btn_favorite", function( event ) {
回答by Edgar Villegas Alvarado
Instead of this:
取而代之的是：
$('.post_button, .btn_favorite').click(function() {
do this:
做这个：
$(document).on('click','.post_button, .btn_favorite', function() {
onwill work with present elements and future ones that match the selector.
on将与匹配选择器的当前元素和未来元素一起使用。
Cheers
干杯
回答by HTTP
I am not sure if I am getting your question right but you may want to try..
我不确定我是否正确回答了您的问题，但您可能想尝试..
$.ajax({
url: "test.html"
}).done(function() {
$('.post_button, .btn_favorite').click(function() {
//Fade in the Popup
$('.login_modal_message').fadeIn(500);
// Add the mask to body
$('body').append('<div class="overlay"></div>');
$('.overlay').fadeIn(300);
return false;
});
Just try to paste your code inside donefunction.
只需尝试将您的代码粘贴到done函数中即可。
Hope it helps :)
希望能帮助到你 ：）
EDIT:
I also notice you are missing });on your question.
编辑：我也注意到你没有});回答你的问题。
回答by Raunak Kathuria
If you know the container for .post_button, .btn_favorite then use
如果您知道 .post_button、.btn_favorite 的容器，则使用
$('#container_id').on('click', '.post_button, .btn_favorite', function () { });
so if '.post_button, .btn_favorite'are not found then it will bubble up to container_id
所以如果'.post_button, .btn_favorite'没有找到，那么它会冒泡到container_id
else if you don't know the container then delegate it to document
否则，如果您不知道容器，则将其委托给文档
$(document).on('click', '.post_button, .btn_favorite', function () { });
回答by user3141847
The following worked for me
以下对我有用
$(document).ready(function(){
$(document).bind('contextmenu', function(e) {
if( e.button == 2 && jQuery(e.target).is('img')) {
alert('These photos are copyrighted by the owner. \nAll rights reserved. \nUnauthorized use prohibited.');
return false;
}
});
});
回答by Mitul
You need to bind the jQuery click event once your ajax content is replaced old content
一旦您的ajax内容被替换为旧内容，您需要绑定jQuery点击事件
in AJAX success block you need to add code like here new response html content one a tag like
在 AJAX 成功块中，您需要在此处添加代码，例如新响应 html 内容一个标签，例如
<a href="#" id="new-tag">Click Me</a>
So you can bind the new click event after change the content with following code
因此您可以在更改内容后使用以下代码绑定新的点击事件
$("#new-tag").click(function(){
alert("hi");
return false;
});
回答by Pergin Sheni
class-of-elementis the applied class of element. which is selector here.
class-of-element是元素的应用类。这是这里的选择器。
$(document).on("click", ".class-of-element", function (){
alert("Success");
});
