javascript - Ajax 在一个事件中只执行一次

Question

我创建了一个小部件，它显示通过对服务器的 ajax 请求获取的 html 模板。我想通过点击 <p> 来刷新模板模板的元素。但是当我点击它时，它只刷新一次模板，然后，如果我再次点击，事件没有响应，它不会再次执行请求。这是我的代码，如果有人知道我做错了什么。

   /******** Our main function ********/
function main() {
    jQuery(document).ready(function ($) {

        var widget_url = "/home/widget?callback=MyCallbackFunction"

        $.ajax({
            url: "/home/widget",
            type: "GET",
            dataType: "jsonp",
            jsonp: "callback",
            success: function (data) {

                $('#example-widget-container').html(data.html);

                $("#panel-sidebar-icon").on("click", function () {

                    $.ajax({
                        url: "/home/widget",
                        type: "GET",
                        dataType: "jsonp",
                        jsonp: "callback",
                        cache: false,
                        success: function (data) {
                            $('#example-widget-container').html(data.html);
                        }
                    });

                });
            }
        });                         


    });
}

模板示例:

<aside> 
        <p id="panel-sidebar-icon">Click </p>
        <ul>
                <li>.... </li>              


        </ul>

</aside>

Answer 1

当您替换容器 html 时，附加到 DOM 元素的事件将丢失，因此。

改变这个

$("#panel-sidebar-icon").on("click", function () { 

对此

$("body").on("click", "#panel-sidebar-icon", function () {