javascript - Onclick 事件在 IE8 及更早版本中未触发

Question

'我对 javascript/jquery 相当陌生，所以我能得到的任何帮助将不胜感激。onclick 事件会在 Firefox、Chrome 和 IE9 中触发……但不会在 IE8 和更早版本中触发。我究竟做错了什么？

HTML

<ul id="list">
<li><a href="url">Item 1</a><a href="javascript:void(0)" class="info-toggle" onclick="toggleInfo(event)"></a>
<p>Informational text</p>
</li>
<li><a href="url">Item 2</a><a href="javascript:void(0)" class="info-toggle" onclick="toggleInfo(event)"></a>
<p>Informational text</p>
</li>
</ul>

CSS

#list li p {
display: none;
 }

#list li .info-toggle {
  background: url(../../images/info-blue17.png) no-repeat;
  display: inline-block;
  height: 17px;
  margin: 0 0 -3px 10px;
  width: 17px;
}

#list li.expanded p {
  display: block;
}

#list li.expanded .info-toggle {
  background: url(../../images/info-17.png) no-repeat;

Javascript

function toggleInfo(event) {
    $target = $(event.target);
    $target.parent().toggleClass("expanded");
    }

如果我需要提供任何其他代码/信息，请告诉我。

提前谢谢了。

Answer 1

您可以使用纯 jQuery 代码，如下所示

$(document).ready(function() {
    $('#list a').click(function(e) {
        e.preventDefault();
        $(this).parent().toggleClass("expanded");
    });
});

由于上面的代码不适合您，请传递this而不是传递event给您的函数。更新后的代码如下：

HTML

<ul id="list">
    <li>
        <a href="url">Item 1</a>
        <a href="javascript:void(0)" class="info-toggle" onclick="return toggleInfo(this)"></a>
        <p>Informational text</p>
    </li>
    <li>
        <a href="url">Item 2</a>
        <a href="javascript:void(0)" class="info-toggle" onclick="return toggleInfo(this)"></a>
        <p>Informational text</p>
    </li>
</ul>

JS

function toggleInfo(el) {
    $(el).parent().toggleClass("expanded");
    return false;
}

CSS

#list li p {
    display: none;
 }

#list li .info-toggle {
  background: blue url(../../images/info-blue17.png) no-repeat;
  display: inline-block;
  height: 17px;
  margin: 0 0 -3px 10px;
  width: 17px;
}

#list li.expanded p {
  display: block;
}

#list li.expanded .info-toggle {
  background: #666 url(../../images/info-17.png) no-repeat;
}

Answer 2

function toggleInfo(event) {
    $target = $(event.target);
    $target.parent().toggleClass("expanded");
}

我的建议是做console.log($(event.target))并验证它是你认为的锚标签（或其他）正确的元素。