AJAX加载后没有发生jQuery事件？

Question

我有一个网站,将淡出我的网站的一部分,加载新内​​容和淡入淡出.我有一个功能,当你点击它时图片会变得很大(这是一个jQuery事件).

它在我加载代码时将它放在代码上,但是当我点击AJAX加载区域中的某些内容时没有任何反应.

这是我加载AJAX的方式:

  // If the user clicks the logo
$("#logo").click(function() {
$("#right_bar_wrapper").animate({ height: 'toggle', opacity: 'toggle' }, '200');
var thePostData = "username=c";
$.ajax({
  type: "POST",
  url: "http://myflashpics.com/v2/process_newsfeed.php",
  data: thePostData,
  success: function(theRetrievedData) {
    document.getElementById('right_bar_wrapper').innerHTML = theRetrievedData;
    $("#right_bar_wrapper").fadeIn("200");
  }
});
});

这是我如何拍照大:

// If the user makes a picture bigger
$(".makePictureBig").click(function() {
var theClassId = $(this).attr('id');  
var theID = theClassId.substring(6)
var bigPictureComment = "#bigpicture_comment_" + theID;
var littlePictureComment = "#littlepicture_comment_" + theID;
var ddd = document.getElementById(theClassId);
var getBig = document.getElementById(bigPictureComment);
var getLittle = document.getElementById(littlePictureComment);
if (ddd.style.width == "180px") {
    ddd.style.width="430px";
    ddd.style.marginBottom='10px';
    ddd.style.cssFloat="left";
    $(littlePictureComment).hide();
    $(bigPictureComment).show();
} else {
   ddd.style.width="180px";
   ddd.style.marginBottom='0px';
   $(bigPictureComment).hide();
   $(littlePictureComment).show();
}
});

这是显示时加载的代码:

<div class="sidebar_image_box_newsfeed">
<div class="sidebar_image_box_newsfeed_user_info makeProfileAppear"><img src="http://myflashpics.com/get_image.php?short_string=uxpi&size=thumbnail" />Brandon Vento</div>
<img src="http://myflashpics.com/get_image.php?short_string=o1sk&size=big" id="image_o1sk" class="makePictureBig" style="width: 180px; margin-bottom: 15px;" />
<div class="sidebar_image_box_newsfeed_user_info_comments" style="float: right; margin-top: -1px; margin-left: 20px; display: none;" id="bigpicture_comment_o1sk">9</div>
<div class="sidebar_image_box_newsfeed_caption">A cool caption will eventually go here.</div>
<div class="sidebar_image_box_newsfeed_user_info_comments" id="littlepicture_comment_o1sk">9</div>
<div style="clear: both;"></div>
</div>

这是通过AJAX加载后不加载的内容:

<div class='sidebar_image_box_newsfeed'> 
<div class='sidebar_image_box_newsfeed_user_info makeProfileAppear' id='user_coultonvento'><img src='http://myflashpics.com/get_image.php?short_string=kmdp&size=thumbnail' />TheAmazingCoultoniusTheFourneeth...</div> 
<img src='http://myflashpics.com/get_image.php?short_string=6v9o&size=big' id='image_6v9o' class='makePictureBig' style='width: 180px;' /> 
<div class='sidebar_image_box_newsfeed_user_info_comments' style='float: right; margin-top: -1px; margin-left: 20px; display: none;' id='bigpicture_comment_6v9o'>9</div> 
<div class='sidebar_image_box_newsfeed_caption'>Usama bin laden? I believe that's a typo, Fox. </div> 
<div class='sidebar_image_box_newsfeed_user_info_comments' id='littlepicture_comment_6v9o'>9</div> 
<div style='clear: both;'></div> 
</div><div class='sidebar_image_box_newsfeed'> 
<div class='sidebar_image_box_newsfeed_user_info makeProfileAppear' id='user_BrandonVento'><img src='http://myflashpics.com/get_image.php?short_string=e4r7&size=thumbnail' />Brandon Vento</div> 
<img src='http://myflashpics.com/get_image.php?short_string=o1sk&size=big' id='image_o1sk' class='makePictureBig' style='width: 180px;' /> 
<div class='sidebar_image_box_newsfeed_user_info_comments' style='float: right; margin-top: -1px; margin-left: 20px; display: none;' id='bigpicture_comment_o1sk'>9</div> 
<div class='sidebar_image_box_newsfeed_caption'></div> 
<div class='sidebar_image_box_newsfeed_user_info_comments' id='littlepicture_comment_o1sk'>9</div> 
<div style='clear: both;'></div> 
</div>

对不起,所有的代码.我觉得这一切都很有必要!

提前致谢!
库尔顿

Answer 1

.click()是简写.bind('click'),仅绑定到页面中已有的元素

要将事件绑定到当前和未来元素,必须使用.live()

// If the user makes a picture bigger
$(".makePictureBig").live('click',function() {
     //code
}); 

编辑:

从jQuery 1.7开始,live已被弃用.你可以使用jQuery:

$(".makePictureBig").on('click', function() {
    //code
}); 

或者,对于委派的事件处理程序:

$("#wrapper").on('click', '.makePictureBig', function(){
    //code
});

Answer 2

这是因为您在文档就绪中编写的所有事件都将仅针对页面加载时可用的元素执行.

您必须使用.live()绑定所有当前和动态生成的元素的事件.

或者,您可以在ajax函数的成功回调中再次绑定事件.