2

我为一个看起来像这样的函数构建了一个 jQuery 选择器：

    $('html').not('.table-main tr[selected]').mousedown( function( e ) {

但不知何故，它根本没有过滤，我不太明白为什么。即使我只是将('.table-main')留给选择器，我仍然会在单击表格时触发该功能......这有什么问题？

使用document或'body'而不是'html'并没有帮助，因为使用 .not() 根本不会触发 document 并且 'body' 会产生相同的结果。

编辑：刚刚尝试在表外使用另一个块，它可以工作。我有可能不能在桌子上使用它吗？

Update2：根据要求，这里是表格的渲染 html 代码：

    <table border="0" cellspacing="2px" cellpadding="5px" class="table-main">
      <tr id="tablefields">
        <th style="padding: 0;">
          <table cellpadding="0" cellspacing="0" border="0" align="center">
            <tr><th><div class="tr-head-get" id="tr-get-0">Name</div></th></tr>
            <tr><th><div class="th-header" id="th-header-0" style="top: 54px;">Name</div></th></tr>
          </table>
        </th>    
      <th style="padding: 0;"></th>
    </tr>
      <tr id='table_form_new_device' class='table_form_class'>
      <form accept-charset="UTF-8" action="/devices" class="new_device" data-remote="true" id="new_device" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="T2dSeZpxxvgJdTP+yoE7BrVODzqJ95gyVu9Wh/v7oP8=" /></div>
        <th class='tablefield'>
          <input id="device_devicename" name="device[devicename]" size="10" type="text" />
        </th>
        <th>
          <div class='submitbox' id='submitbox_new_device'>S</div>
          <script>
            $('#submitbox_new_device').click(function (event) {
              $('#new_device').submit();
            });
          </script>
        </th>
    </form></tr>
    </table>
    <div class="dropdown-button" style="margin: 0 2px;">Filter</div>
4

3 回答 3

3

您真的非常想为此使用委托事件处理，因为您不想将事件处理程序附加到文档中的每个元素。您想在文档级别拦截冒泡事件，只需检查 mousedown 是否来自不是表中选定行的元素。

此外，tr[selected]似乎不太可能工作。我认为您需要向"selected"所选行添加一个类，然后tr.selected用作选择器。

如果您进行更改，我建议您选择以下两个选项之一：

$(document).mousedown(function(e) {
    if (!$(e.target).is('.table-main tr.selected')) {
       // mouse down and it wasn't in a selected row of your table)
    }
})

你也可以让 jQuery 委托做更多的工作：

$(document).on('mousedown', ':not(.table-main tr.selected)', function() {
   // mouse down and it wasn't in a selected row of your table)

});

看到您的实际 HTML 后，如果我正确理解了问题，这应该可以工作。只要单击不在table-main具有selected该类的行中，只要单击发生，这就会为您提供一个事件：

$(document).on('mousedown', function(e) {
   // mouse down and it wasn't in a selected row of your table)
    e.stopPropagation();
    if (!$(e.target).closest(".table-main tr.selected").length) {
        console.log("mousedown not in selected row of table-main")
    }
});​

这是一个演示：http: //jsfiddle.net/jfriend00/5QD6N/

于 2012-04-04T17:26:03.623 回答
2

[selected]对 type 的元素使用没有意义tr。您将 selected 用于输入（checkbox,radio）。.selected您可以在 tr 元素中添加一个类.table-main，然后使用：

编辑：就像上面发布的人一样，您想使用选择嵌套在正文中的元素。

$('body').find(':not(.selected)').mousedown(function(e){})
于 2012-04-04T17:05:32.303 回答
1

$('html')创建一个包含您的 HTML 元素的 jQuery 对象。

.not('.table-main tr[selected]')删除任何带有选定属性的 TR 元素（这里有一个错误，该属性不会出现在 TR 上），这些元素是table-main类成员元素的后代。由于 HTML 元素不是 TR 元素并且不能从任何东西派生，因此不会删除任何元素并且没有任何效果。

mousedown( function( e )将事件处理程序绑定到 HTML 元素。除非某些东西停止传播，否则任何点击最终都会冒泡到那里。

我猜（因为您实际上并没有说出您想要实现的目标）您想要捕获对未选择的 TR 元素的点击。假设您切换到使用类来使 HTML 有效……</p> 

$('.table-main tr:not(.selected)').mousedown(…);

和

<tr class="selected">
于 2012-04-04T17:05:52.473 回答