jQuery - .on('click') 不适用于 <li> 元素

Question

我被委托使用WordPress制作网站，主页上有一个滑块，如果点击下面的按钮，它会显示另一张图片，很简单吧？好吧，我已经有了滑块和按钮，我添加了jQuery，但它不想工作。

我首先尝试将按钮实际设置为按钮：

<button type="button" class="btn btn-success" id="hideshow-healthcare">Healthcare</button>

当我使用以下代码时，它能够正常工作：

    jQuery(document).ready(function() {
    jQuery('#hideshow-healthcare').on('click', function() {
        jQuery('#healthcare').show();
    };
};

所以在使其按照这种方式工作后，我开始将按钮改为li，以便遵循设计。但是，在做出这个修改后，滑块不再起作用。我尝试了多种不同的方法，包括将ID添加到li中的所有内容以查看是否有用，但很遗憾没有成功。我进行了一些研究，并尝试更改

    jQuery('#hideshow-healthcare').on('click', function() {

to

    jQuery('li#hideshow-healthcare').on('click', function() {

但是，仍然没有运气。我希望有人能提供解决这个问题的方法。

此外，这是我目前使用的li代码：

<li><a id="hideshow-healthcare"><h5>HEALTHCARE</h5> Lighting to create a feeling of well being</a></li>

- JoshJohnsonUK

---

你在尝试做什么？你的第一次尝试和你声称有效的答案没有任何区别...你没有得到任何不同的结果。我想知道是不是因为你在点击事件中没有使用 e.preventDefault();？实际上，你没有 href 所以可能不需要阻止默认行为。 - musefan

我不太确定在第一次尝试之后有什么改变，因为我能看到的唯一不同之处就是li和ID之间的空格，但它似乎正在工作 :/ - JoshJohnsonUK

Answer 1

在查找li元素的后代#hideshow-healthcare时，您需要在li元素后添加空格。应该是这样的：

 jQuery('li #hideshow-healthcare').on('click', function() {

- Milind Anantwar

---

谢谢！它起作用了...我现在感觉很愚蠢，这么简单的东西哈哈哈。一旦我能够，我会将您的答案标记为正确答案！ - JoshJohnsonUK

@musefan：我正要提到这个。但是我想如果楼主需要的话，为什么不呢... - Milind Anantwar

@JoshJohnsonUK：很高兴能帮到你 :) - Milind Anantwar

是的，他似乎对此感到满意...但这仍会将事件添加到a标签中，对吧？我想也许OP没有意识到这一点。 - musefan

Answer 2

#hideshow-healthcare 是 li 的子元素。在 jQuery 中使用后代选择器。

jQuery('li a#hideshow-healthcare').on('click', function(event) {
       event.preventDefault(); // prevents default action 
       // your code 
});

在HTML中，id应该是唯一的，你只需要直接使用id进行编写。

jQuery('#hideshow-healthcare').on('click', function(event) {
           event.preventDefault(); // prevents default action 
           // your code 
 });

- Sudharsan S