2

In my Aurelia project I have a hidden table at the top (whose header I clone), which I want to use in order to display its header (fixed position) when the original one is scrolled out of view. The problem I have is that the click.delegate of the cloned header is not calling the method in my typescript.

view.html

<table id="fixed-header"></table>
<table scrollable-header id="tableWithScrollableHeader" if.bind="something">
    <thead>
            <tr>
                <th width="55%">
            </th>
                <th repeat.for="item of listOfItems">
                    ${item.name}
                    <div>
                        <label click.delegate="doSomething(item.id)">
                            <span>${item.date}</span>
                            <i class="glyphicon glyphicon-pencil"></i>
                        </label>
                    </div>
                </th>
            </tr>
        </thead>
    <tbody repeat.for="itemOfBody of listOfItemsForBody">
        // irreleveant code that displays the table's body
    </tbody>
</table>

The scrollable-header is a custom attribute I created which clones the header of my table and appends it to the hidden table, using 

 var $tableHeader = $("#tableWithScrollableHeader > thead");
 var $clonedHeader = $tableHeader.clone(true, true);
 var $fixedHeaderTable = $("#fixed-header").append($clonedHeader);

Then on scroll it determines whether to display the original table's header or the fixed positioned one. (similar to this answer) It displays the fixed header correctly when the original one's out of view but clicking the label does not do anything. I've also tried replacing click.delegate with click.trigger but hasn't made any difference.

msokrates
  • 188
  • 10
  • In pure JS + jQuery `clone` works as expected including events. I have a simple [https://gist.github.com/bhalperin/a848c3e97d9e32793b4cb43224a4eff4](Gist) to demonstrate. As first step replace `click.delegate=` with `onclick=` just to check if Aurelia's implementation of events is the cause. – Benny Halperin Jun 16 '17 at 10:37
  • I replaced it as you suggested with this: `onclick="alert('test')"` and it worked fine on the cloned element – msokrates Jun 16 '17 at 10:44
  • Maybe the way Aurelia is attaching event handlers to elements is not like how `onclick` (and others familiar) handlers are attached. And jQuery does not clone the handlers because they are not stored in the same objects as `onclick` handlers. – Benny Halperin Jun 16 '17 at 10:49

1 Answers1

0

check out the answer on this post: Aurelia dynamic binding sounds like you need to bind dynamically. the example gist, creates a button after attached with a click.delegate firing an alert

link to gist from the post above: https://gist.run/?id=1960218b52ba628f73774822aef55ad7

MattjeS
  • 1,367
  • 18
  • 35
  • Thanks but this didn't really solve the problem. And couldn't find another way of adding new binding for the cloned header, so my solution is to duplicate the header in my .html and then in the custom attribute just show/hide it depending on the offset (without cloning) – msokrates Jun 16 '17 at 16:18