0

我有以下 jQuery 工具覆盖：

<div id='editDescriptiontOverlay' class='overlay'>
  <input type='text' class='description'/>
  <button class='save'>Save</button>
  <button class='close'>Cancel</button>
</div>

背景信息：此叠加层的 HTML 是静态的。我有一个项目列表，每个项目都有自己的编辑链接。单击给定的编辑链接时，将通过调用生成叠加层：$('a[rel=#editDescriptionOverlay]').overlay( { ... } );并使用相应的文本填充输入。

当且仅当验证成功时，保存按钮需要验证输入元素中的文本并关闭覆盖。否则，覆盖必须保持打开状态。取消按钮只是关闭覆盖而不进行验证。

验证逻辑已经过独立验证可以正常工作。

我尝试onBeforeClose在覆盖生成期间设置事件作为验证手段。采用这种方法，保存和取消按钮都需要相同的类.close。不幸的是，该条件适用.close于叠加层中的所有元素，因此即使是“取消”按钮也在验证。

我还尝试在生成叠加层后立即将单击事件绑定到“保存”按钮，如下所示：

$('.save', $('#editDescriptionOverlay'))
  .unbind('click')
  .bind('click', function() {
    if (validateText) {
      console.log("Validation passed.");
      $('a[rel=#editDescriptionOverlay]').overlay().close();
    }
    else {
      console.log("Validation failed.");
    }
  });

console.log 确认验证工作正常，但覆盖没有关闭。

任何见解表示赞赏，谢谢。

4

2 回答 2

1

对于 jquery 小部件，应按如下方式调用公共方法：

$('a[rel=#editDescriptionOverlay]').overlay("close");

其中 close 是您要调用的方法名称。

如果一个方法接受参数，那么这些应该作为参数添加到方法名称之后。

更新：

对不起。我刚刚有时间检查 jQuery Overlay Tools 是什么，但我弄错了。这与任何 jQuery 小部件都不相似，因此，我上面的评论也不适用于这种情况。我在上面尝试了您的代码并且它有效。覆盖已关闭。但是，当我尝试使用 multiple<a rel="#editDescriptionOverlay">时，我认为这就是你所做的。那没起效。我的建议是只使用一个<a rel="#editDescriptionOverlay">并为 Edit 链接使用一个虚拟锚元素，单击该元素会触发对<a rel="#editDescriptionOverlay">. 你可以这样做：

<script type="text/javascript">

    $(document).bind("ready", function(e){
        $("a[rel]").overlay();
        $('.save', $('#editDescriptionOverlay')).unbind("click").bind("click", function(){
            if (validationValue){
                $("a[rel=#editDescriptionOverlay]").overlay().close();
            }
        });
    });

    function clickThis(){
        $("a[rel=#editDescriptionOverlay]").trigger('click'); 
        return false;
    }
</script>

<a href="#" onclick="return clickThis();">Edit1</a>
<a href="#" onclick="return clickThis();">Edit2</a>

<a rel="#editDescriptionOverlay">Dummy</a>

<div id='editDescriptionOverlay' class='overlay'>
  <input type='text' class='description'/>
  <button class='save'>Save</button>
  <button class='close'>Cancel</button>
</div>
于 2012-07-23T16:26:20.157 回答
0

我更喜欢将事件绑定到保存按钮（您提到的第二个）。实际上，您的代码看起来不错，除了您可能不需要将事件绑定到$('#editDescriptionOverlay')并且您在上面的 html 标记中有错字（<div id='editDescriptiontOverlay'应该是<div id='editDescriptionOverlay'）。

有关示例，请参见此处。

于 2012-07-23T18:59:32.880 回答