jquery load（）動態內容不能正常工作

我有一個網站有幾個圖塊，點擊後應該加載一個特定的內容到網站上的另一個div。內容是在一個由我存儲在每個tile的「rel」屬性中的「id」引用的php頁面上。例如：jquery load（）動態內容不能正常工作

<div id="tile" rel="1">tile 1 preview content</div> 
<div id="tile" rel="2">tile 2 preview content</div> 
<div id="tile" rel="3">tile 3 preview content</div>

這裏就是我試圖讓jQuery的做到這一點：

$('#tile').on('click', function(){ 
    var projectId = $(this).attr('rel'); 
    $('#projectLoad').load('project.php?id='+projectId); 
});

誰能幫助我弄清楚爲什麼它不工作？謝謝！

來源

2013-04-23 cody

「不工作」是什麼意思？錯誤？沒有結果？ #projectLoad在哪裏？你確定project.php正在返回你認爲它是什麼嗎？ – 2013-04-23 18:47:26

沒有任何其他信息很難說。你可以發佈完整的HTML/JS爲一個最小的例子嗎？ – ubik 2013-04-23 18:47:40

是否能夠在控制檯中看到響應？ – 2013-04-23 18:47:53

-1

它看起來像你正試圖加載內容到ID爲「#projectload」的div。您的代碼中沒有使用該ID的div。

來源

2013-04-23 18:47:58 StephenCollins

在你的例子中，所有的div都有相同的id。 Id必須是唯一的。如果你給他們每個唯一的ID，你的代碼是否工作？

<div id="tile1" rel="1">tile 1 preview content</div> 
<div id="tile2" rel="2">tile 2 preview content</div> 
<div id="tile3" rel="3">tile 3 preview content</div> 

$('#tile1').on('click', function(){ 
    var projectId = $(this).attr('rel'); 
    $('#projectLoad').load('project.php?id='+projectId); 
}); 

$('#tile2').on('click', function(){ 
    var projectId = $(this).attr('rel'); 
    $('#projectLoad').load('project.php?id='+projectId); 
}); 

$('#tile3').on('click', function(){ 
    var projectId = $(this).attr('rel'); 
    $('#projectLoad').load('project.php?id='+projectId); 
});

注意測試這個功能，你可以試試這個jQuery代碼：

$('#tile1').on('click', function(){ alert('hello from div 1'); }); 
$('#tile2').on('click', function(){ alert('hello from div 2'); }); 
$('#tile3').on('click', function(){ alert('hello from div 3'); });

由於Palash在他的回答中提到，您可以使用類而不是ID的避免這種重複。（類不必是唯一的。）

<div class="tile" rel="1">tile 1 preview content</div> 
<div class="tile" rel="2">tile 2 preview content</div> 
<div class="tile" rel="3">tile 3 preview content</div> 

$('.tile').on('click', function(){ 
    var projectId = $(this).attr('rel'); 
    alert('hello from div ' + projectId); 
})

下面是一個的jsfiddle顯示這個簡單的測試 - http://jsfiddle.net/RHXGS/

另外，自成體系，測試從註釋中加入

<!DOCTYPE html> 
<html> 

    <head> 
     <title>Click Test</title> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
     <script> 
      $(document).ready(function() { 
       $('.div1').on('click', function() { 
        alert('Click!'); 
        $('#div2').html('content'); 
       }); 
      }); 
     </script> 
    </head> 

    <body> 
     <div class="div1">click me</div> 
     <div id="div2"></div> 
    </body> 

</html>

來源

2013-04-23 18:48:09

這沒有奏效。我甚至在警報中添加了：alert（'Click！'）;在功能，但我沒有得到警報。 – cody 2013-04-23 19:13:07

您是否注意到我只爲第一個div「tile1」添加了jQuery？所以點擊事件只會觸發那一個div。使用唯一的ID你需要爲每個ID分別添加jQuery。我會更新我的答案與其他div的jQuery，以避免混淆。 – 2013-04-23 19:19:15

是的 - 我像你一樣將我的測試定位到了tile1。我還針對您的第二個示例中的幾個不同的貼圖，並且仍然沒有提示。 – cody 2013-04-23 19:27:41

使用class而不是像這樣的id：

<div id="tile" rel="1">tile 1 preview content</div> 
<div id="tile" rel="2">tile 2 preview content</div> 
<div id="tile" rel="3">tile 3 preview content</div>

這個;

<div class="tile" rel="1">tile 1 preview content</div> 
<div class="tile" rel="2">tile 2 preview content</div> 
<div class="tile" rel="3">tile 3 preview content</div>

和JS代碼：

$('.tile').on('click', function(){ 
    var projectId = $(this).attr('rel'); 
    $('#projectLoad').load('project.php?id='+projectId); 
});

你會得到一個projectId你的DIV點擊這個時間和負載將工作各一次。
請始終嘗試在HTML標記中使用唯一的ID。

來源

2013-04-23 18:49:25

這不起作用。你有任何方法來解決這個問題嗎？我在函數中添加了一個警報來測試頁面是否檢測到點擊，但是沒有警報出現。 – cody 2013-04-23 19:14:14

jquery load（）動態內容不能正常工作

回答

相關問題