jquery事件不適用於Opera和Chrome上的許多div

在我的網站上，我創建了幾個div，分別是id="bigger"。這個div應該放大div id="text"並加載內部（使用ajax）接下來subweb。這裏是我的代碼部分：jquery事件不適用於Opera和Chrome上的許多div

 /*ajax*/ 
    function ajax(src, cont){ 
      $.ajax({ 
       url: src, 
       context: document.body, 
       success: function(responseText) { 
        $(cont).html(responseText); 
        $(cont).find("script").each(function(i) { 
         eval($(this).text()); 
        }); 
       } 
      }); 
    } 

    /*bigger div*/ 
    $(document).ready(function(){ 
     $('div#bigger').click(function(){ 
      $("#text").animate({ 
      width: "1050px", 
      left:"150px", 
      padding:"0" 
      }, 1500); 
      $('#infbox').css('display','none'); 
     }) 
    }) 
    <!--it's work--> 
          <div id="bigger" onClick="ajax('gallery.php', '#text')" class="slide"> 
          <span id="galdesc"><p>G<br />A<br />L<br />E<br />R<br />I<br />A</p></span> 
          <img src="img/slideshow/galler2y.png" class="img" /> 
         </div> 
         <div id="bigger" onClick="ajax('website.php', '#text')" class="slide"> 
          <span id="webdesc"><p>S<br />T<br />R<br />O<br />N<br />Y<br /><br />W<br />W<br />W</p></span> 
          <img src="img/slideshow/website.png" class="img" /> 
         </div> 
         <div id="bigger" onClick="ajax('applications.php', '#text')" class="slide"> 
          <span id="webdesc"><p>P<br />R<br />O<br />G<br />R<br />A<br />M<br />Y</p></span> 
          <img src="img/slideshow/applications.png" class="img" /> 
         </div> 
       </div> 
      </div> 
     </div> 
     <div id="cont"> 
      <div id="menu" onClick="ajax('textpl.txt','#text')"><p>MENU</p></div> 
      <div id="teleadr"> 
       <p>e-mail:<a href="mailto:[email protected]"> makowskaewa&#64;o2.pl</a>&nbsp; &#124; &nbsp; tel: 607079560</p> 
      </div> 
      <div id="infbox"> 
       <div id="inf"> 
        <p>NA STRONIE:</p> 
        <ul> 
<!--this three not work on Opera and Chrome--> 
         <li><div id="bigger" onClick="ajax('gallery.php','#text')"><p>galeria</p></div></li> 
         <p>Moje prace wykonane głównie przy wykorzystaniu programów graficznych takich jak Photoshop, Gimp oraz Blender.</p><br /> 
         <li><div id="bigger" onClick="ajax('website.php','#text')"><p>webmastering</p></div></li> 
         <p>Stworzone przeze mnie strony www.</p><br /> 
         <li><div id="bigger" onClick="ajax('applications.html','#text')"><p>programowanie</p></div></li> 
         <p>Kilka prostych programów napisanych przy wykorzystaniu php oraz baz danych.</p> 
        </ul> 
       </div> 
      </div> 
      <div id="text">

一切工作正常的Firefox，但是當我使用Opera或Chrome我可以只用三個第一DIV id="text"。當我嘗試使用第三個div時，應該像早先的div一樣加載相同的subweb，但沒有反應。即使僞類:hover不起作用，並且螢火蟲似乎沒有看到這些元素。我試圖改變id="bigger"到class="bigger"，以及幾種方法來連接jQuery的不是一個，而是每個div與一個ID。

我不知道該怎麼做，也許有人可以幫助我。我希望我能正確寫出一切，因爲我的英文不完美。

來源

2015-05-20 FKa

爲什麼你使用onclick以及綁定點擊事件？你可以使用像這樣的數據屬性：http://jsfiddle.net/ukvrhqhy/1/。 'span'中的'p'無效並且id應該是唯一的 - 如果你爲id選擇一個id，它將只使用它找到的第一個，因爲它不會再找到 – Pete

你能否提供一個js-你的問題的小提琴？ – Jordumus

每個ID在該頁面上必須是唯一的。無論如何，具有相同ID的多個元素都會給你帶來問題。

如果再次改變你的div有class="bigger"而不是id="bigger"，然後你適應你的代碼，你應該得到了很多進一步不已：

$(document).ready(function(){ 
     $('div.bigger').click(function(){ 
      $("#text").animate({ 
      width: "1050px", 
      left:"150px", 
      padding:"0" 
      }, 1500); 
      $('#infbox').css('display','none'); 
     }) 
    })

確保#text ID是唯一的！如果它不是唯一的，它將無法工作！ #infobox

您也應該關閉您的<div id="text">與</div>，但這可能只是您的示例代碼被切得太緊了。

Global standard of ID attribute

來源

2015-05-20 08:54:40 Jordumus

問題解決了。這是錯誤的CSS。 #infbox的position：absolute和z-index：-1，所以它覆蓋了另一層，我做了它，因爲然後jquery效果看起來更好。刪除z-index後：-1一切正常，看起來不錯。

來源

2015-05-21 12:32:35 FKa

jquery事件不適用於Opera和Chrome上的許多div

回答

相關問題