Jquery对话框不适用于图像单击[重复]
Posted
技术标签:
【中文标题】Jquery对话框不适用于图像单击[重复]【英文标题】:Jquery Dialog not working on image click [duplicate] 【发布时间】:2017-08-19 01:35:24 【问题描述】:工作流程:
将 JSON 传递到角度范围并在视图中使用 ng-repeat
来显示它。
使用以下函数在单击特定类的元素时显示对话框。
$(function ()
$("#dialog").dialog(
autoOpen: false,
show:
effect: "blind",
duration: 1000
,
hide:
effect: "explode",
duration: 1000
);
$(".opener").on("click", function ()
$("#dialog").dialog("open");
);
);
$(function ()
$("#imagePopup").dialog(
autoOpen: false,
show:
effect: "blind",
duration: 1000
,
hide:
effect: "explode",
duration: 1000
);
希望它在点击特定类时触发。
<tr ng-repeat="item in ItemList| filter:itemName ">
@*<td>
item.CreatorID
</td>*@
<td >
item.ItemName
</td>
<td >
item.CreatorName
</td>
<td >
item.Length
</td>
<td >
item.Width
</td>
<td >
item.Price
</td>
<td >
item.ItemDescription
</td>
<td >
item.Quantity
</td>
<td >
<div class="opener" style="text-align:center">
<img ng-src="@Url.Content("item.ImagePath")" class="img-responsive img-circle" />
</div>
</td>
<td >
<span class="glyphicon glyphicon-pencil"></span>
</td>
<td >
<span class="glyphicon glyphicon-trash"></span>
</td>
</tr>
</table>
<button class="opener">Opener</button>
<button class="opener">Opener11</button>
<div id="dialog" title="Item Image">
<p>Sample text</p>
</div>
当我点击按钮Opener
&Opener11
时出现弹出窗口,但没有点击具有相同类的<div>
(在ng-repeat 内)。
如果我遗漏了什么,谁能告诉我?
【问题讨论】:
项目是否是动态添加的(页面渲染后)? - 在这种情况下你需要事件委托 【参考方案1】:改用:
$(document).on("click", ".opener", function ()
$("#dialog").dialog("open");
);
在触发文档就绪事件时,您正在使用 DOM 上不存在的元素注册事件。
参考问题: Event binding on dynamically created elements?
【讨论】:
谢谢,你能分享一个链接,详细解释一下吗?以上是关于Jquery对话框不适用于图像单击[重复]的主要内容,如果未能解决你的问题,请参考以下文章