jquery event not work with many div on Opera and Chrome

On my webside I create several div with id=”bigger”. This div should enlarge div id=”text” and loud inside (using ajax) next subweb.
Hire is part of my code:

        /*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:makowskaewa@o2.pl"> makowskaewa@o2.pl</a>&nbsp; | &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">

Everything work correctly on Firefox, but when I use Opera or Chrome I can use only three first div id=”text”. When I try use second three div, that should lous the same subweb like earlier div, there is no reaction. Even pseudo-classes :hover not work, and firebug seems to doesn’t see this elements.
I tried change id=”bigger” to class=”bigger”, and several ways to connect jquery with not one but every div with one id.
I don’t have idea what to do, maybe somebody could to halp me. I hope I wrote everything correctly, because my english isn’t perfect.


Source: ajax

Leave a Reply