Domplate event issue - onclick for individual elements

[Dan]

Hi,

I'm creating a Firebug extension and struggling with domplate events.

Given 2 separate elements, each with a separate onclick handler, the same handler (onBtnOneClick) is called for both elements.

Sure, I could check the event.target, but the ui is going to get a lot more complicated than this, and surely I should be able to attach different handlers to different elements?

See the template (some of it) below.

FYI, if I delete btnOne, then onBnTwoClick is called when btnTwo is clicked.

Is this a bug, expected behaviour, or am I doing something else wrong? 

var MyPlate = domplate({

    ui: 

        TABLE({"class" : "stretch"}, 

            TR(

                TD({"class" : "fit nowrap"},

                    

                    A({"class" : "btn flush", "id" : "btnOne", onclick : "$onBtnOneClick"}, 

                        SPAN({"class" : "icon one"}),

                        " One"

                    ),

                    A({"class" : "btn", "id" : "btnTwo", onclick : "$onBtnTwoClick"}, 

                        SPAN({"class" : "icon select"}),

                        " Two"

                    )

                ),

 ......

[Sebastian Zartner]

The code seems ok. The two event handlers should work independently.
Any chance I could try out your extension?

Sebastian

[Dan]

Hi Sebastian,

Thanks for the quick reply.

Rather than complicate things with lots of unrelated code, I have created a small and simple extension which replicates the problem. The extension adds a new side panel into the HTML panel.

Reproduction steps : click btnOne and btnTwo and check the FBTrace output - you'll see that both buttons trigger the same handler.

Please see attached and let me know if you have any questions, or need anything else from me.

Thanks,

Dan

[Jan Honza Odvarko]

On Saturday, March 1, 2014 10:55:52 AM UTC+1, Dan wrote:

Hi,

I'm creating a Firebug extension and struggling with domplate events.

Given 2 separate elements, each with a separate onclick handler, the same handler (onBtnOneClick) is called for both elements.

Sure, I could check the event.target, but the ui is going to get a lot more complicated than this, and surely I should be able to attach different handlers to different elements?

See the template (some of it) below.

FYI, if I delete btnOne, then onBnTwoClick is called when btnTwo is clicked.

Is this a bug, expected behaviour, or am I doing something else wrong? 

var MyPlate = domplate({

    ui: 

        TABLE({"class" : "stretch"}, 

You are missing TBODY element (Domplate requires that)

Does it help?

Honza


 

[Sebastian Zartner]

    ui: 

        TABLE({"class" : "stretch"}, 

You are missing TBODY element (Domplate requires that)

I investigated a bit in the morning but didn't think of that having any influence. Is that mentioned somewhere, i.e. in the code, in the wiki or a blog post?
 

Does it help?

It fixes the problem for me at least.

Sebastian

[Jan Honza Odvarko]

On Monday, March 3, 2014 2:56:55 PM UTC+1, Sebastian Zartner wrote:

    ui: 

        TABLE({"class" : "stretch"}, 

You are missing TBODY element (Domplate requires that)

I investigated a bit in the morning but didn't think of that having any influence. Is that mentioned somewhere, i.e. in the code, in the wiki or a blog post?

I don't know, but you can go ahead and mention it somewhere ;-)

Honza

 

[Dan]

Yes, that fixed it for me too.

I wouldn't have guessed that would have impacted the event handing either.

Thanks both for taking the time to help :)