Question

I’ve built a jQuery selector for a function which looks like this:

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

But somehow it is not filtering at all and i do not quite understand why.
Even if i just leave (‘.table-main’) for the selector i still trigger the function when clicking into the table… What is wrong with that?

Using document or ‘body’ instead of ‘html’ does not help, as document is not triggering at all with .not() and ‘body’ results in the same.

Edit:
Just tried using another block outside of the table and it works. Is there a chance i cannot use this on tables?

Update2: As requested, here is the rendered html code of the table:

    <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>

Answer 1

You really, really want to use delegated event handling for this because you don’t want to attach an event handler to every single element in the document. You want to intercept bubbled events at the document level and just check if the mousedown came from an element that was not a selected row in your table.

In addition the tr[selected] seems unlikely to work. I think you need to add a class "selected" to the selected row and then use tr.selected as the selector.

If you make that change, I’d suggest something like one of these two options:

$(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)
    }
})

You may also be able to let jQuery delegation do more of the work:

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

});

---

After seeing your actual HTML, if I understand the problem correctly, this should work. This will give you an event anytime a click happens as long as that click is not in a row of table-main that has the selected class on it:

$(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")
    }
});​

Here’s a demo: http://jsfiddle.net/jfriend00/5QD6N/