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 () {

Answer 2

可能是因为您创建了一个新的DOM对象，因此事件随着擦除而变化。您应该更新元素上的简单数据或重新创建与之关联的相同组件+事件

Ajax只在事件

2 个答案: