Функция jquery click работает только при первом нажатии в ie6 - PullRequest
1 голос
/ 22 февраля 2010

У меня есть «панель функций», состоящая из списка сервисов и изображения, представляющего каждый сервис. Щелчок по тегу h2 в списке удаляет классы on и noborder из всех элементов li, а затем следует применять эти классы к элементу li, в котором был щелкнут h2.

Это прекрасно работает во всех браузерах, кроме ie6. В ie6 он решает работать для первого клика, но не для последующих кликов. Очевидно, мне это нужно, чтобы работать с каждым кликом тега h2. Любая помощь будет принята с благодарностью!

Вот код JavaScript:

$(document).ready(function(){
  $("#feature-list h2").click(function(){
    var $curr = $(this).parent();
    $("#feature-image").html('<img src="/images/feature/' + $(this).attr('title') + '.jpg" />');
    $("#feature-list li").removeClass('on');
    $("#feature-list li").removeClass('noborder');
    $curr.addClass('on');
    $curr.prev().addClass('noborder');
  });
});

Вот CSS:

#feature-wrapper, #feature-title, #feature-image, #feature-list, #feature-tab { 
 color: #fff;
 float: left;
 height: 248px; }

#feature-wrapper { margin-bottom: 1em; }

#feature-title { 
 background-color: #455560;
 position: relative;
 width: 52px; }

#feature-image { width: 413px; }

#feature-tab { 
 background-color: #f7901e;
 width: 21px; }

#feature-list {
 background-color: #455560;
 background-image: url(/images/feature-list-bg.gif);
 background-position: top left;
 background-repeat: repeat-y;
 margin-left: 2px;
 width: 456px;
 height: 248px; }

#feature-list ul { margin: 0; }

.feature-list p {
 font-size: 1em;
 line-height: 1.2em;
 padding: 5px 15px;
 margin: 0;
 display: none; }

.feature-list li {
 margin: 0;
 list-style-type: none; }

.feature-list .on {
 background-color: #f7901e; }

.feature-list .on p {
 display: block;
 height: 43px;
 padding: 4px 15px; }

 .feature-list .on p.infolink {
  background-color: #f47a16;
  font-size: 0.9em;
  font-weight: bold;
  height: 13px;
  margin: 0;
  padding: 2px 15px 4px;
  text-align: right; }

 .feature-list .on p.infolink a { color: #fff; }

 .feature-list h2 {
  background-image: url(/images/feature-title-arrow.png);
  background-position: -50px 11px;
  background-repeat: no-repeat;
  cursor: pointer;
  padding: 2px 15px;
  font-size: 1.3em;
  font-weight: normal;
  border-bottom: 1px dotted #fff; }

 .feature-list li.on h2 {
  background-position: 0 11px;
  cursor: default;
  font-size: 2em;
  padding: 0 25px; }

И HTML:

<div id="feature-wrapper">
  <div id="feature-title">
    <img src="/images/autodesk.gif" style="position: absolute; bottom: 5px; right: 5px;" />
  </div>
  <div id="feature-image">
    <img src="/images/feature/transport.jpg" />
  </div>
  <div id="feature-tab">
    <img src="/images/feature-tab.gif" style="margin: 5px;" />
  </div>
  <div id="feature-list">
    <ul class="feature-list">
      <li class="on">
        <h2 title="transport">Transportation</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p>
        <p class="infolink"><a href="#">more information</a></p>
      </li>
      <li>
        <h2 title="industrial">Industrial Machinery</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p>
        <p class="infolink"><a href="#">more information</a></p>
      </li>
      <li>
        <h2 title="oilgas">Oil &amp; Gas</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p>
        <p class="infolink"><a href="#">more information</a></p>
      </li>
      <li>
        <h2 title="renewables">Renewables</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p>
        <p class="infolink"><a href="#">more information</a></p>
      </li>
      <li>
        <h2 title="engineering">General Engineering</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p>
        <p class="infolink"><a href="#">more information</a></p>
      </li>
      <li>
        <h2 title="training">Process &amp; Power</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p>
        <p class="infolink"><a href="#">more information</a></p>
      </li>                         
    </ul>
  </div>
</div>

1 Ответ

0 голосов
/ 23 февраля 2010

Вы давали функцию "живого" назад? Вместо

$("div").click(function() {}); 

попробуй

$("div").live("click", function() { });  

Он прикрепляет событие ко всем текущим и будущим экземплярам элемента.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...