2012-03-20 55 views
1

如果我在我看來,獲取圖像的採集這樣jQuery的新手的onclick

foreach (var item in Model.Photos) 
{ 
    <a href="@Url.Action("GetImage", "Property", new { id = item.Id })" > 
     <img class="details" onclick="ImageDetails();" width="100" height="100" src="@Url.Action("GetImage", "Property", new { id = item.Id })" /> 
    </a>   
} 

這將重現HTML代碼,我相信你已經知道了,但在這裏它是:

<a href="/Property/GetImage/5"> 
    <img class="details" width="100" height="100" src="/Property/GetImage/5" onclick="ImageDetails();"> 
</a> 

我試圖用我的Photos.js這個樣子,只是警告消息

function ImageDetails() { 
    $(".details").click(function (event) { 
     alert('details alert');  
    }); 
} 

沒有戒備,在Firebug沒有任何消息? 我錯在哪裏?

+1

由於沒有一個答案到目前爲止解釋了爲什麼它不起作用:當你點擊一個圖像,你運行一個函數,將另一個點擊事件附加到ima水電站。換句話說,你有一個單擊事件處理程序,它只創建另一個點擊事件處理程序。 – JJJ 2012-03-20 19:59:27

回答

0

您正在錯誤地使用jQuery的click活頁夾。每次單擊控件時不需要調用它;您只需調用一次,通常在頁面加載時。它用於綁定控件的所有未來點擊次數的處理程序的onclick處理程序。

所以,你有兩個主要選擇:

//HTML: 
<img class="details" onclick="ImageDetails();" width="100" ...etc. 

或者:

//HTML: 
<img class="details" width="100" ...etc. (no onclick attribute) 

//JavaScript: 
$('.details').click(ImageDetails); 

在這兩種情況下,ImageDetails將成立這樣的:

function ImageDetails(event) { 
    alert('details alert'); 
} 
0

您應該刪除HTML中的onclick屬性,並調用ImageDetails()一次,或者將其從函數中移除並在DOM準備就緒後運行。

1

確保在文檔加載完成後綁定事件,否則嘗試綁定事件的元素將不會加載。

$(function() { 
    $(".details").click(function (event) { 
     alert('details alert');  
    }); 
}); 

編輯:或者您也可以撥打ImageDetails()onload()功能。 :)

+0

真的很快:)謝謝 – BobRock 2012-03-20 19:57:06

+0

沒問題,很高興我可以幫助。如果此答案解決了您的問題,請讓其他人通過接受它來更輕鬆地找到此解決方案! =) – 2012-03-20 19:57:27