Question

如果我在我的视野中收集像这样的图像

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');     
    });
}

没有警报，萤火虫没有任何消息？我哪里错了？

Answer 1

确保在文档加载完成后绑定事件，否则您尝试绑定事件的元素将不会加载。

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

编辑：或者您可以从ImageDetails()功能调用onload()。：）

Answer 2

您应该删除HTML中的onclick属性，并调用ImageDetails()一次或将其从函数中删除，然后在DOM准备就绪后运行它。

Answer 3

您错误地使用了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');  
}

jquery新手onclick

3 个答案: