如何为不同的设备创建单独的按钮？

Question

我一直在使用引导程序来创建响应式网站。 我刚刚遇到了一个新场景，我不确定如何解决它。 我有以下 html 代码：

        <!-- button color depending on desktop vs. phone -->
        <button class="btn visible-desktop" id="modifyVLANS">Modify VLANS</button>
        <button class="btn hidden-desktop lsm-visible-phone btn-warning" id="modifyVLANS">Modify VLANS</button>

稍后，我有以下jquery：

    //show list
    $('#modifyVLANS').click(function()  {
            do something....

但是，因为我有两个名称相同的按钮，所以在移动设备上，onclick 事件不会触发。 我不想使用单独的事件处理程序创建两个单独的按钮......因为代码将完全相同。 我怎样才能解决这个问题？

谢谢。

Answer 1

我不会根据设备隐藏按钮，而是隐藏整个表单。在尝试为移动设备实现一种样式的<input type="search"> 和为桌面实现另一种样式时，我遇到了同样的问题。

然后，将您的事件处理程序绑定到按钮class 而不是id，因为即使其中一个按钮根据视图被隐藏，您仍然可以仍然只有一个带有@987654325 的元素@ 每页。

这是simple fiddle。