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>

• javascript
• jquery

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/

Using [selected] makes no sense on a element of type tr. You use selected for inputs(checkbox,radio). You can add a class .selected to the tr elements in .table-main and then use :

Edit: Like somebody posted above, you want to use select the elements nested inside the body.

$('body').find(':not(.selected)').mousedown(function(e){})

$('html') creates a jQuery object containing your HTML element.

.not('.table-main tr[selected]') removes any TR elements with a selected attribute (there is an error here, that attribute doesn't appear on TRs) that are descended from elements that are members of the table-main class. Since HTML elements are not TR elements and can't be descended from anything, this removes no elements and has no effects.

mousedown( function( e ) binds an event handler to the HTML element. Unless something stops propagation, any click will eventually bubble up to there.

I'm guessing (since you didn't actually say what you wanted to achieve) that you want to capture clicks on TR elements that aren't selected. Assuming that you switch to using classes to make the HTML valid…

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

and

<tr class="selected">