javascript - jquery/ajax - .load 保持相同的 JQuery

Question

基本上，

我想做的是有一个按钮，当您单击该按钮时，会加载另一个 .html 表单其中有一个按钮到下一个 .html 页面等等......

第一部分有效，并且对于要加载的表单，但是，当加载下一个表单时，jquery 不适用于该按钮。例如:

index1.html:

<button id="LoadForm" value="form1.html">Load the form</button>

$(document).ready(function() {
    function foo(x) {
        $('.content').load(x);
    }

    $('#LoadForm').click(function() {
        var ele = $(this).attr("value");
        $(this).hide();
        form(ele);
    });
}); 

在form1.html中:

<button id="LoadForm" value="index.html">Go to form2..</button>

我哪里出错了？

Answer 1

1) 同一页面上不能有重复的 id，因此 .content 必须包含原始的 #LoadForm 按钮(我假设确实如此)和

2)您需要对动态添加的元素使用委托(delegate)事件处理程序:

$(document).ready(function() {
    function foo(x) {
        $('.content').load(x);
    }

    $(document).on('click', '#LoadForm', function() {
        var ele = $(this).attr("value");
        $(this).hide();
        form(ele);   // This should be foo in your example :)
    });
}); 

这通过监听冒泡到不变祖先的点击事件来实现(document是最好的默认值，没有什么更接近的。永远不要使用' body' 因为它存在与样式相关的问题)。然后应用 jQuery 过滤器。它然后将提供的函数应用于生成事件的任何选定元素。

和3)您的示例中有foo和form。请更正代码:)