Событие Onclick не срабатывает в IE8 и ранее

Question

'm довольно новичок в 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)) и убедитесь, что это якорный тег (или любой другой) правильный элемент вы предполагаете, что это будет.