Question

I am trying to select some elements within a portion of the page

$table = $(".table");
console.log($table);//this is fine
$edit_butts = $(".btn_edit", $table);
console.log($edit_butts);//elements dimmed and seemingly detached from dom - no click binding etc work

Does anyone now why these elements are getting dettached?

In console

bright and when clicked element found in dom
    jQuery(table.table)

dimmed, when clicked firebug goes to edit screen
    jQuery(div.btn_edit, div.btn_edit, div.btn_edit, div.btn_edit, div.btn_edit, div.btn_edit, div.btn_edit, div.btn_edit)

Any help much appreciated.

Also I should point out but I’m not sure if relevant the portion of the page is wrapped with a knockoutjs with directive.

<table  class="table>
<!-- ko with: model.item -->
edit butts
<div class="btn_edit"></div>
<!-- /ko -->
</table>

Answer 1

The with binding removes the children of the element that it is applied to and keeps a copy to use as a template. If the item that the with is bound against changes, then the template is used to generate the content and this happens even for the initial rendering.

The with binding is actually the equivalent of template: { if: myData, data: myData }, which uses anonymous templates (the children of the element).

So, the elements are getting removed from the DOM. I am not sure of your objective, but if you find the elements after ko.applyBindings is called, then you would have a reference to the current elements being used inside the with binding.