jquery 事件不适用于 Opera 和 Chrome 上的许多 div答案

【问题标题】：jquery event not work with many div on Opera and Chromejquery 事件不适用于 Opera 和 Chrome 上的许多 div
【发布时间】：2015-05-20 08:28:08
【问题描述】：

在我的网站上，我使用id="bigger" 创建了几个 div。这个 div 应该放大 div id="text" 并在接下来的 subweb 内部加载（使用 ajax）。这是我的代码的一部分：

        /*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&#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 也不起作用，firebug 似乎也看不到这些元素。我尝试将id="bigger" 更改为class="bigger"，以及几种将jquery 连接到不是一个而是每个具有一个id 的div 的方法。

我不知道该怎么做，也许有人可以帮助我。我希望我写的一切都正确，因为我的英语并不完美。

【问题讨论】：

你为什么使用onclick以及绑定click事件？您可以像这样使用数据属性：jsfiddle.net/ukvrhqhy/1。 p 内 span 无效，id 应该是唯一的 - 如果您为 id 执行选择器，它将仅使用它找到的第一个，因为它不再期望找到
你能提供一个 js-fiddle 你的问题吗？

标签： jquery ajax google-chrome opera

【解决方案1】：

每个 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> 关闭您的<div id="text">，但这可能只是您的示例代码被剪得太紧了。

Global standard of ID attribute

【讨论】：

【解决方案2】：

问题解决了。这是不正确的CSS。 #infbox 有 position:absolute 和 z-index:-1，所以它被另一个层覆盖，我做到了，因为这样 jquery 效果看起来更好。删除 z-index:-1 后一切正常，看起来还不错。

【讨论】：