由 onclick 发起的 jquerytools 覆盖答案

【问题标题】：jquerytools overlay initiated by onclick由 onclick 发起的 jquerytools 覆盖
【发布时间】：2013-05-03 08:56:22
【问题描述】：

我正在尝试使用jQuerytools overlay 进行确认对话。我对调用叠加层的“onclick”函数有疑问。

HTML

<!-- list element -->
<ul>
    <li id="item1">
         <div class="listName">myListElement-1</div>
         <div class="listCtrlr"><span onclick="delItem(1, 'myListElement-1')" rel="#deldlg">delete</span></div>
    </li>
    <li id="item2">
         <div class="listName">myListElement-2</div>
         <div class="listCtrlr"><span onclick="delItem(2, 'myListElement-2')" rel="#deldlg">delete</span></div>
    </li>
    <li id="item3">
         <div class="listName">myListElement-3</div>
         <div class="listCtrlr"><span onclick="delItem(3, 'myListElement-3')" rel="#deldlg">delete</span></div>
    </li>
</ul>



<!-- overlay dialogue -->
<div id="deldlg" class="modd">
    <h5>Confirmation - Delete Campaign</h5>
    <div class="ctn">
        <p id="dq">Are you sure you want to permanently delete this data?</p>
        <p id="di"></p>
        <input type="button" value="Yes" id="delsubmit" class="brButton s grdRed">
        <input type="button" value="No" class="brButton s close">
    </div>
</div>

JavaScript

function delItem(iid, iname) {
    var trigger = this;
    trigger.overlay({
                    fixed: false,
                    closeOnClick: false,
                    mask: {color:'#660000', loadSpeed:100, opacity:0.9},
                    onBeforeLoad:function() {
                                    jQuery('#di').html(iname);
                                    jQuery('#delsubmit').attr('onclick', 'del_camp('+iid+')');
                                }
                });
}

当我使用上面的脚本时，它返回“trigger.overlay 不是函数”。有人可以帮我解决这个问题吗？

我期望得到以下结果（假设我要删除 element-2）

Confirmation - Delete Campaign
-------------------------------------------------------------
Are you sure you want to permanently delete this data?

    myListElement-2

[ Yes ]     [ No ]

【问题讨论】：

您确定this 确实是它应有的样子吗？尝试使用 chrome 或 firebug 中的开发者工具来调试 JS，看看里面发生了什么。
@Nomad101 这就是我在这里问的原因，因为我不知道哪个是正确的用法——因为它不起作用。

标签： jquery onclick overlay jquery-tools

【解决方案1】：

我认为它应该是 $(this).overlay(...) 代替，因为这不是一个 jquery 对象，而是一个简单的 dom 对象，因此无法访问 jquery 函数/插件

【讨论】：

由于我上面的脚本不起作用，我考虑了你在那里的建议，但 jQuery(this).overlay({...}) 仍然没有任何响应
我看到你的代码更好，我确定我们在一个类中的位置。你的案例的正确文档是这个jquerytools.org/demos/overlay/modal-dialog.html 在一个简单的函数中，你没有将它分配给任何东西，那就是为什么你会出错；我建议像 $("#deldlg").overlay({}).....

【解决方案2】：

好的，我现在知道您遇到的问题是什么。好的，因此您需要为用作叠加层的任何 HTML 元素显式设置一个 id。然后像这样使用它 $("#findme").overlay({..}); 您所指的 this 对象是您所在函数的范围，而不是 DOM 元素。至少从我能告诉你的代码来看。

【讨论】：

感谢@Nomad101 的回复。但是，我仍然不明白您的“您所指的this 对象是您所在函数的范围，而不是DOM 元素。”