km-text span in Button prevents data-click

[Gilles]

Hi Support

I have this very annoying issue using the following Button:

<a id="btb1" data-role="button" style="background-color: green; width:90%;" data-click="action" data-name="Stuff & Stuff" data-id="1" data-unit="Unit" data-unitid="1" class="km-button">

 <span class="km-text">DONT CLICK ME</span>

</a>

When clicking on the text in the Button, the Button changes to its hover-style but the action is not happening. Clicking on the outside of the text fires the click-event properly. The span around the text is generated automaticly.

I'm now trying to find a workaround, but this needs a fix asap - for sure.
Thanks

[Gilles]

Me again,

I've managed to get rid of the issue by removing the <span class="km-text"></span> which is surrounding the text of the button with the "unwrap" jquery function. Triggering it in combination with a callback to be sure that the DOM is already created.

$("ul.km-listgroupinset span.km-text").contents().unwrap();

I'm not really happy with this solution, maybe there's a way to ignore this button when kendoui is wrapping the unnecessary <span> around my button text? Glad that this fixed the issue, but this is dirty and didn't solved the actual problem.

Regards
Gilles

[Petyo]

Hi Giles,

I am not sure that I understand your case. I recreated a simple example in this jsbin, and the callback is executed reliably in Google Chrome and on an iOS device. What am I missing? 

Regards,
Petyo
the Telerik team

[Klaus]

Hi,

I'm currently on the trial for your software, but I have the same issue as Gilles in this thread.

This simple HTML:

<a data-role="button" onclick="alert('test');">button test</a>

Turns into this, when I "view source" in my browser:
<a data-role="button" onclick="alert('test');" class="km-button"><span class="km-text">button test</span></a>

It works fine in my browser, but once I put it on the iPhone (simulator), the "onclick" breaks, probably because of the span inside the a's?  If you click juuuust outside of the button, so you actually hit the "<a..." part, before "<span>" begins, then the alert will work. But if you hit the button as usual, no alert will come.  Like I said, I think the span inside the a must break onclick somehow, once it gets onto the iPhone?


Edit: Actually, after having tried the "dirty trick" posted above, I don't think the inside span are at fault. The dirty trick was using this:
$("ul.km-listgroupinset span.km-text").contents().unwrap();

.. which makes the HTML end up like this:
<a data-role="button" onclick="alert('test');" class="km-button">button test</a>

But the alert will still not work on iPhone, unless you manage to click the just before the button design. 

So I currently have no idea how I can make a data-role="button" have an onclick attached, so it can call functions. 

[Petyo]

Hi Klaus,

Using the onclick DOM event is not recommended. Please refer to the snippets below (and to our documentation) for the proper widget click event binding. 

All the best,
Petyo
the Telerik team

[Klaus]

Hi Petyo,

Thanks for your reply, but I think you forgot to include the snippet :)

[Petyo]

Hello Klaus,

I was referring to the code snippets in the first post in this thread. You may also check this demo. 

All the best,
Petyo
the Telerik team

[Klaus]

Hi Petyo,

Thanks for that last demo. It does make a bit of sense to me now.

So basically, since you can't pass parameters through data-click, like:

data-click="logClick('button123')"  

You would instead need to have a lot of "case" or "if...then" in the logClick function, to do whatever action you want to do, depending on the button clicked, is that correct?

Thanks again!

[Alexander Valchev]

Hi Klaus,

Instead of heavy "if ... then" logic, you can use custom data attributes. Please check this forum post.

Kind regards,
Alexander Valchev
the Telerik team