jQuery .load（）help UPDATED

Question

我還在學習jQuery，所以我不知道這裏發生了什麼，但我使用了一個我在css-tricks上找到的過濾腳本，並試圖在點擊時將內容加載到div中，但是我在url中獲得undefined。

我在不受過濾腳本影響的頁面部分做了這個工作，所以我只需要弄清楚什麼是衝突。

任何人都可以請幫忙！

所以這是我的jQuery加載在div內容：

$(document).ready(function(){ 
    $('#target').click(function() { 
     event.preventDefault(); 
     $('#target').empty(); 
     $('#target').load('project1.html'); 
    }); 
}); 

這是HTML：

<div id="target"> 
    <div class="sixteen columns clearfix thumbnail photoeditor"> 
     <div class="two-thirds columns alpha"> 
      <img src="images/d1.png" class="scale-with-grid" alt="fieldlazer" /> 
     </div> 
     <div class="one-third columns omega"> 
      <span class="title">Title goes here</span> 
      <span class="details">Description goes here</span> 
     </div> 
    </div> 
</div> 

，這是過濾jQuery腳本：

(function($){ 
    // Shuffle function from: http://james.padolsey.com/javascript/shuffling-the-dom/ 

    $.fn.shuffle = function() { 
     var allElems = this.get(), 
      getRandom = function(max) { 
       return Math.floor(Math.random() * max); 
      }, 
      shuffled = $.map(allElems, function() { 
       var random = getRandom(allElems.length), 
        randEl = $(allElems[random]).clone(true)[0]; 
       allElems.splice(random, 1); 
       return randEl; 
      }); 

     this.each(function(i){ 
      $(this).replaceWith($(shuffled[i])); 
     }); 

     return $(shuffled); 
    }; 
})(jQuery); 

$(function(){ 
    $(".thumbnail") 
     .css("opacity","0.7") 
     .hover(
      function() { $(this).css("opacity","1"); }, 
      function() { $(this).css("opacity","0.7"); } 
     ) 

     $("#allcat").click(function(){ 
      $(".thumbnail").slideDown(); 
      $("#catpicker a").removeClass("current"); 
      $(this).addClass("current"); 
      return false; 
     }); 

     $(".filter").click(function(){ 
      var thisFilter = $(this).attr("id"); 
      $(".thumbnail").slideUp(); 
      $("."+ thisFilter).slideDown(); 
      $("#catpicker a").removeClass("current"); 
      $(this).addClass("current"); 
      return false; 
     }); 

     $(".thumbnail").shuffle(); 
}); 

任何幫助都會非常棒。謝謝！

編輯：另外我想：

$(document).ready(function(){ 

$('#target').click(function(){ 

var link = $(this).attr('rel'); 
event.preventDefault(); 
$('#target').empty(); 
$('#target').load(link); 

}); 
}); 

與HTML：

<div id="target" class="sixteen columns clearfix thumbnail photoeditor" rel="404.html"> 
<div class="two-thirds columns alpha"> 
<img src="images/d1.png" class="scale-with-grid" alt="fieldlazer" /></div> 
<div class="one-third columns omega"> 
<span class="title">Title goes here</span> 
<span class="details">Description goes here</span> 
</div> 
</div> 

依然無果。

編輯：另一個更新

讓我有種得到它的工作，但它僅適用於第一個div（PROJECT1），當我清空外部HTML的div和放回的＃內容main-它顯示的內容很奇怪，並且沒有任何功能可用。 有什麼建議嗎？

這裏是新的jQuery：

$(document).ready(function(){ 

$('#portfolio div').click(function(event){ 

var link = $(this).attr('rel'); 
event.preventDefault(); 
$('#main-content').load(link); 

$("#back").live("click", function(event){ 
$('#main-content').empty(); 
$('#main-content').load('index.html #main-content *'); 
}); 
}); 
}); 

和HTML：

<div id="main-content"> 
<ul class="tabs-content"> 
<li class="active" id="portfolio"> 


<ul id="catpicker"> 
<li class="active"><a href="#" id="allcat" class="current">View All</a></li> 
<li><a href="#" id="photoeditor" class="filter">Photo Editor</a></li> 
<li><a href="#" id="producer" class="filter">Producer</a></li></ul> 

<div class="sixteen columns thumbnail photoeditor" rel="project1.html"> 
<div class="two-thirds columns alpha"> 
<img src="images/d1.png" class="scale-with-grid" alt="fieldlazer" /></div> 
<div class="one-third columns omega"> 
<span class="title">Project 1</span> 
<span class="details">Details go here</span> 
</div> 
</div> 

<div class="sixteen columns thumbnail photoeditor" rel="project2.html"> 
<div class="two-thirds columns alpha"> 
<img src="images/d1.png" class="scale-with-grid" alt="fieldlazer" /></div> 
<div class="one-third columns omega"> 
<span class="title">Project 2</span> 
<span class="details">Details go here</span> 
</div> 
</div> 

<div class="sixteen columns thumbnail photoeditor" rel="project3.html"> 
<div class="two-thirds columns alpha"> 
<img src="images/d1.png" class="scale-with-grid" alt="fieldlazer" /></div> 
<div class="one-third columns omega"> 
<span class="title">Project 3</span> 
<span class="details">Details go here</span> 
</div> 
</div> 


</li> 
<li id="words"> 
</li> 
</ul> 
</div><!-- main content --> 

Answer 1

我上了阻止默認行的錯誤，那是因爲你忘了事件經過。將事件傳遞給像這樣的.click函數。

$('#target').click(function(event) 

之後，它爲我工作。