Onclick event not firing in IE8 and earlier

Question

'm fairly new to javascript/jquery, so any help I can get would be very much appreciated. The onclick event fires in Firefox, Chrome, and IE9...but not IE8 and earlier. What am I doing wrong?

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");
    }

If I need to provide any additional code/info, please let me know.

Many thanks in advance.

Answer 1

You can use pure jQuery code like below

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

As above code not working for you, pass this instead of event to your function. Updated code is as below:

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");
}

My advice is to do console.log($(event.target)) and verify that it's the anchor tag (or whatever) correct element you assume it to be.