Question

我有以下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确认验证工作正常，但叠加层未关闭。

感谢任何见解，谢谢。

Answer 1

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

$（ '一个[相对=＃editDescriptionOverlay]'）覆盖（ “关闭”）。

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

如果方法接受参数，则应将这些参数作为参数添加到方法名称后面。

<强>更新

对不起我有时间检查jQuery Overlay Tools是什么，我错了。这与任何jQuery小部件都不相似，因此，我上面的评论也不适用于这种情况。我尝试了上面的代码并且它有效。叠加层已关闭。但是，当我尝试使用多个<a rel="#editDescriptionOverlay">时，我认为这就是你所做的。那没起效。我的建议是只使用一个<a rel="#editDescriptionOverlay">并为编辑链接使用虚拟锚元素，单击该链接会触发点击<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>

Answer 2

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

请参阅here for an example。

jQuery工具覆盖 - 两个具有不同关闭条件的按钮

2 个答案: