按钮的点击事件没有不同的行为

Posted 2023-02-24

【中文标题】按钮的点击事件没有不同的行为

【英文标题】：On click event for buttons don't have different behavior

【发布时间】：2016-03-04 14:59:36

【问题描述】：

我有一些 php 和 html：

<div class="bought">
    <div class="row">
        <div class="col">
            <div class="body">
                <?php if(Request::is('user/*'))  ?>
                <div>Did you buy this for <?php echo $user->username ?>?</div>
                <div class="options">
                    <a class="boughtyes cbutton whiteonpurple">Yes</a>
                    <a class="boughtno cbutton whiteonpurple">No</a>
                </div>
                <?php  else  ?>
                <div>Bought?</div>
                <p>Click here to send hinters a message to let them know.<br />And yes, it can still be a surprise!</p>
                <?php  ?>
            </div>
        </div>
    </div>
</div>

还有一些 jQuery，它应该根据选择简单地弹出一个 javascript 窗口，而不是或是：

$("#view-hint .img .bought .boughtyes").click(function() 
    window.alert("yes");
);
$("#view-hint .img .bought .boughtno").click(function() 
    window.alert("no");
);

但无论我点击是或否按钮，它都会返回“是”：

我做错了什么？

编辑：

使用 chrome 看起来元素是分开的：

编辑2：

【问题讨论】：

尝试将您的 jquery 选择器缩短为仅元素的类，即 $('.boughtyes') 和 $('.boughtno')

您确定“是”按钮不会与 CSS 中的“否”按钮重叠吗？而不是 window.alert("yes"); 将 window.alert($(this).attr('class')); 放入两个 clicks 以查看您实际单击的是哪个按钮。

好的，您是否使用您的开发工具检查了两个按钮的框不会以某种方式相互重叠（即使您单击第二个按钮也会触发第一个按钮的点击事件）？另一个可能有用的测试是尝试单击按钮周围的其他位置，看看会发生什么。

是的，但他们都有相同的课程.buttonyes！你的.buttonno在哪里？！！！！

顺便说一句，boughtyes 和 boughtno 都是 "bought" 按钮的类型，所以 bought 类是有意义的，但是是和否按钮是特定按钮，而不是按钮的类型，因此class="cbutton" id="boughtyes" 会更有意义。

【参考方案1】：

两个a 按钮具有相同的class：

请纠正他们。这就是 .boughtno 根本没有应用的原因。看到他们都有class="boughtyes"。看到你的代码，它是正确的，这意味着你需要硬刷新。尝试使用 Ctrl+Shift+R 或清除缓存。

如果您使用的是 Laravel 或 Cake 等框架，请尝试重新启动并再次编译资源并尝试。我用过vagrant。对于这些我通常使用：

vagrant reload --provision

一些信息：Laravel 5 clear views cache