点击别处不在jquery中工作

时间:2014-03-17 16:15:54

标签: javascript jquery

我收到了这段代码:

<script type="text/javascript" language="javascript">
$(document).ready(function() {
  $('td').click(function() {
    if($('#edit').length == 0) {
      var idz = $(this).parent().attr('id');
      var textz = $(this).text();
      var rowz = $(this).attr('id');
      $(this).append('<textarea id=\"edit\" style=\"position:absolute;left:0;top:0;z-index:1;\">'+textz+'</textarea>').focus();
    }
  });
  if($('#edit').length > 0) {     
    $('html:not(#edit)').click(function() {
      $('#edit').remove();
    });
  }
});
</script>

    <div class="table">
        <table>
          <tr>
            <td>ID</td>
            <td>Client</td>
            <td>Category</td>
            <td>Active</td>
          </tr>
          <tr id="2">
            <td>2</td>
            <td>Client 2</td>
            <td>1</td>
            <td>1</td>
          </tr>
          <tr id="1">
            <td>1</td>
            <td>Client 1</td>
            <td>2</td>
            <td>1</td>
          </tr>
       </table></div>

我在这里要做的是截取任何表格单元格上的点击并打开一个带有单元格值的小文本区域。 IT工作正常

但问题是,我试图通过点击其他地方而不是#edit来关闭textarea。所以,这部分代码不起作用:

  if($('#edit').length > 0) {     
    $('html:not(#edit)').click(function() {
      $('#edit').remove();
    });
  }

我尝试了if / else语句的各种方法,如果在另一个语句中等等,它仍然无法正常工作。请告诉我一些我的错误。

1 个答案:

答案 0 :(得分:2)

#edit元素在第一个页面加载时不存在,因此事件处理程序永远不会被绑定,因为条件失败。
此外,html:not(#edit)通常不是可行的方法,将事件处理程序附加到文档并检查点击是否来自#edit,如果不是{@ 1}}。

更改此

#edit

if($('#edit').length > 0) {     
    $('html:not(#edit)').click(function() {
        $('#edit').remove();
    });
}

FIDDLE