jquery代码在IE中不起作用？

Question

我在 jquery 中有这段代码，可以在单击按钮时将 div 隐藏在另一个 div 中，它适用于 firefox 和 chrome 但不适用于 IE9：

$(document).ready(function () {
        $("#esconde, #Div1, #Div2").hide();
        $("#act2").click(function () {
            $("#esconde").fadeIn(1000).show().append($("#lista1"));
            $("#listadefault").remove().fadeOut(500);

            $("#act3").click(function () {
                $("#listadefault").remove();
                $("#Div1").fadeIn(1000).show().append($("#lista1"));

                $("#act4").click(function () {
                    $("#Div2").fadeIn(1000).show().append($("#lista1"));
                    $("#listadefault").remove().fadeOut(500);
                });

            });
        });

这是html：

<div id="Div1" class="span12">
    <table class="well table table-condensed">
        <label>tabela 3</label>
                <thead>
                    <tr>
                        <th>Opção 1</th>
                        <th>Opção 2</th>
                        <th>Opção 3</th>
                    </tr>    

                </thead>
                <tbody>
                    <tr><td>Dado 1</td><td>Dado 2</td><td>
                        <div class="btn-group" data-toggle="buttons-checkbox">
                            <button type="button" class="btn btn-primary">
                                dado1</button>
                        </div>
                    </td>
                    </tr>
                    <tr><td>Dado 1</td><td>Dado 2</td><td><div class="btn-group" data-toggle="buttons-checkbox">
                            <button type="button" class="btn btn-primary">
                                dado1</button>
                        </div></td></tr>
                    <tr><td>Dado 1</td><td>Dado 2</td><td><input type="button" data-toggle="buttons-checkbox" class="btn btn-primary" /></td></tr>
                    <tr><td>Dado 1</td><td>Dado 2</td><td><input type="checkbox" /></td></tr>
                </tbody>


            </table>
    </div>

上面的这个 div 应该出现在 #lista1 div 中。

Answer 1

您将所有点击事件都包含在彼此内部：

试试这个：

$(document).ready(function () {
        $("#esconde, #Div1, #Div2").hide();
        $("#act2").click(function () {
            $("#esconde").fadeIn(1000).show().append($("#lista1"));
            $("#listadefault").remove().fadeOut(500);
        });

            $("#act3").click(function () {
                $("#listadefault").remove();
                $("#Div1").fadeIn(1000).show().append($("#lista1"));
            });
                $("#act4").click(function () {
                    $("#Div2").fadeIn(1000).show().append($("#lista1"));
                    $("#listadefault").remove().fadeOut(500);
        });
  });

Answer 2

我知道这与您的问题没有任何关系，但是在查看您的 javascript 之后，我不能不注意到您正在对没有太大意义的元素执行一些操作。我的 cmets 是内联的：

    $(document).ready(function () {
        $("#esconde, #Div1, #Div2").hide();
        $("#act2").click(function () {
            $("#esconde").fadeIn(1000).show().append($("#lista1"));
            $("#listadefault").remove().fadeOut(500); // Fading out an element which is already removed

            // Attaching an event handler after a click event is handled.
            // This actually repeats every time you click and even if it's intentional you should perform .one() instead of click, so you don't bind multiple times
            $("#act3").click(function () {
                $("#listadefault").remove();
                $("#Div1").fadeIn(1000).show().append($("#lista1")); // Showing an element which is shows. FadeIn shows the element.

                $("#act4").click(function () {
                    $("#Div2").fadeIn(1000).show().append($("#lista1")); // Same thing with fadeIn and show as the above comment.
                    $("#listadefault").remove().fadeOut(500); // Same thing with remove and fadeOut
                });

            });
        });