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

Question

我一直在使用bootstrap来创建一个响应式网站。 我刚刚遇到一个新的场景，我不知道如何解决它。 我有以下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，因为即使根据视图隐藏其中一个按钮，您也可以仍然只有一个元素每页id 。

这是simple fiddle。