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

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，因为即使其中一个按钮根据视图隐藏，您仍然只能有一个元素，id每页。

这是一个简单的小提琴。