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 时出现弹出窗口,但没有点击具有相同类的&lt;div&gt;(在ng-repeat 内)。

如果我遗漏了什么,谁能告诉我?

【问题讨论】:

项目是否是动态添加的(页面渲染后)? - 在这种情况下你需要事件委托 【参考方案1】:

改用:

$(document).on("click", ".opener", function () 
       $("#dialog").dialog("open");
);

在触发文档就绪事件时,您正在使用 DOM 上不存在的元素注册事件。

参考问题: Event binding on dynamically created elements?

【讨论】:

谢谢,你能分享一个链接,详细解释一下吗?

以上是关于Jquery对话框不适用于图像单击[重复]的主要内容,如果未能解决你的问题,请参考以下文章

单击导航栏链接时jQuery对话框不起作用

jQuery对话框上的Onclick事件不适用于IOS

Jquery UI 单击不适用于拖动的图像。当图像 > 1

jquery 下载图像(数据:图像)链接不适用于 Ipad,但在窗口中工作正常

Google 身份验证不适用于 AngularFire2

复制粘贴不适用于 spyder 中的绘图