Question

我目前正在创建一个包含各种小部件的网站，我希望能够动态添加/删除。

我正在使用jQuery实现这一目标（至少计划）。

最简单的小部件是登录小部件。看起来像这样：

<div id="widget1">
    <div class="close"></div>
    <div id="widget1_title"></div>
    <div id="widget1_content">


        <form method='post' action='index.php'>
        <div id="widget1_username">
        Username<input type='text' maxlength='16' name='user' value='' />
        </div>

        <div id="widget1_password">
        Password<input type='password' maxlength='16' name='pass' value='' />
        </div>

        <div id="widget1_submit">
        <input type='submit' value='LOGIN' />
        </div>


    </div>
</div>

这存储在名为login_widget.html的文件中。由于login-widget是应该在网站上预加载的东西（用户不必提起它），我的index.php文件看起来像这样：

<body>



    <div id="container">
        <div id="content">
            <div id="sidebar">
                <div id="login-sidebar"></div>
            </div>

            <div id="header">
                <div></div>
                <div></div>
                <div id="header-logo"></div>
            </div>

            <div id="main-content">

                <div id="widget1">
                    <div class="close"></div>
                    <div id="widget1_title"></div>
                    <div id="widget1_content">


                        <form method='post' action='index.php'>
                        <div id="widget1_username">
                        Username<input type='text' maxlength='16' name='user' value='' />
                        </div>

                        <div id="widget1_password">
                        Password<input type='password' maxlength='16' name='pass' value='' />
                        </div>

                        <div id="widget1_submit">
                        <input type='submit' value='LOGIN' />
                        </div>


                    </div>
                </div>              


            </div>

            <div id="footer">

            </div>

        </div>
    </div>


</body>

（原来它在<?php include_once('login_widget.html'); ?>）。

然后我按下了一个按钮，按下该按钮以加载文件中的代码。

这是jQuery代码：

$(document).ready(function(){



$(".close").click(function(){
    $(this).parent().remove();
});


$("#login-sidebar").click(function(){
    $.ajax({
        url: 'login_widget.html'
    }).done(function(data) {
        $('#main-content').append(data);
    }); 
});

});

现在问题。这是因为它发布了html代码并在网站上显示，但问题是“关闭按钮”不再起作用。所以我无法使用名为“close”的类删除新创建的html元素。

我对jQuery很新，但我认为这是一种做法，但我错过了什么？

提前致谢！

Answer 1

将您的窗口小部件构建为在创建它们时将其自身事件绑定以移除自身或使用事件委派的模块。鉴于您目前使用的基本代码，事件委派将是最简单的。

$("#main-content").on("click",".close",function(){
    $(this).parent().remove();
})

在网站上添加“小部件”

1 个答案: