Question

我已经编写了用于创建动态div的代码，它看起来像一个使用多个实例概念的小窗口，div包含标题和内容，在标题中我附加3个按钮并为这些按钮编写代码..然后我创建了3个对象。当我点击那个按钮时，相应的div只响应了那个事件，但实际上我得到的是，无论点击什么按钮，第一个对象只做出反应，我现在该怎么办？这是我的代码：

<script>
    $(document).ready(function () {

        var Window = function createwindow(title, word) {
            this.title = title;
            this.word = word;
            //div
           this.div = $('<div/>').attr({ 'id': 'div1' }).appendTo("body");
            $('body').css({
                "padding-top": "50px",
                "padding-right": "50px",
                "padding-bottom": "50px",
                "padding-left": "50px"
            });
            $(this.div).css({
                "height": "780px",
                "width": "780px",
                "border": "1px solid black",
                "display-align": "center",
                /*         "padding-top": "50px",
                           "padding-right": "50px",
                           "padding-bottom": "50px",
                           "padding-left": "50px"      */
            });

            //header
            this.header = $('<div/>').attr({ 'id': 'header' }).appendTo("#div1");
            $(this.header).text(this.title).css({
                "font-size": "40px",
                "text-align": "center",
                "text-transform": "uppercase",
                "color": "white",
                "text-shadow": " 2px 2px red"
            });

            $(this.header).css({
                "height": "100px",
                "border-bottom": "1px solid black",
                "width": "780px"
            });

            //content
            this.content = $('<div/>').attr({ 'id': 'content' }).appendTo("#div1");
            $(this.content).text(this.word).css({
                "margin-left": "auto",
                "margin-right": "auto",
                "width": "70%"
            });
            $(this.content).css({
                "height": "680px",
                //       "width":"780px",
                //  "border": "1px solid black",
                "text-align": "center",
                "font-size": "30px",
                "color": "green"
            });

            //images

            this.img1 = $('<img/>').attr({
                'id': 'mini',
                'src': 'mini.jpg',
                'height': '20px',
                'width': '20px',
                'position': 'static',
                'right': '0px'

            }).appendTo(this.header);


            this.img2 = $('<img/>').attr({
                'id': 'restore',
                'src': 'restore.jpg',
                'height': '20px',
                'width': '20px',
                'position': 'static',
                'right': '0px'

            }).appendTo(this.header);


            this.img3 = $('<img/>').attr({
                'id': 'close',
                'src': 'close1.jpg',
                'height': '20px',
                'width': '20px',
                'position': 'static',
                'right': '0px'
            }).appendTo(this.header);

            //event for images

            this.img1.bind('click', function () {
                    $('#content').slideToggle("slow");
                });


            this.img2.bind('click', function () {
                    $('#div1').css({
                        "height": "360px",
                        "width": "360px",
                    });
                    $('#header').css({
                        "height": "50px",
                        "width": "360px",
                    });
                    $('#content').css({
                        "height": "340px",
                    });
                });

            this.img2.bind('dblclick', function () {
                    $('#div1').css({
                        "height": "780px",
                        "width": "780px",
                    });
                    $('#header').css({
                        "height": "100px",
                        "width": "780px",
                    });
                    $('#content').css({
                        "height": "680px",
                    });

                });

            this.img3.bind('click', function (event) {
                    $('#div1,#header,#content').hide(this.div);
              });


        }
            var s = new Window("Homepage", "I'm first window");
            var p = new Window("FirstPage", "I'm second window");
            var k = new Window("SecondPage", "I'm Third window");



  });



    </script>

Answer 1

您对所有元素使用相同的ID（您有多个＃content，多个#header，多个#div1 ...），因此只能在具有此ID的第一个元素上触发单击。 ID必须是唯一的（＃div1，＃div2，...）。如果要为许多元素保留相同的名称，则必须使用class属性，或使用不同的ID。

例如，通过向createwindow函数添加新参数编号：

var Window = function createwindow(title, word, number) {
    this.div = $('<div/>').attr({ 'id': 'div'+number }).appendTo("body");
    ...
}
var s = new Window("Homepage", "I'm first window", 1);
var p = new Window("FirstPage", "I'm second window", 2);
var k = new Window("SecondPage", "I'm Third window", 3);

您必须相应地更改其余代码（使用类而不是标题和内容的ID，更新您的点击事件，以便它们以父级#divX为目标等）。

如何在jQuery中使用多个实例为动态创建的div分配click事件？

1 个答案: