jquery - 用于编辑的 jQuery 在 AJAX 加载的页面上不起作用？

Question

我是 AJAX 和 jQuery 的新手，我尝试将 jQuery 用于我的编辑页面。当此文件在直接页面上执行时，localhost/test/test_edit.php它可以完美运行，但在 AJAX 加载页面中不起作用。

$(document).ready(function(){
$(".editlink").on("click", function(e){
  e.preventDefault();
    var dataset = $(this).prev(".datainfo");
    var savebtn = $(this).next(".savebtn");
    var theid   = dataset.attr("id");
    var newid   = theid+"-form";
    var currval = dataset.text();

    dataset.empty();

    $('<input type="text" name="'+newid+'" id="'+newid+'" value="'+currval+'" class="hlite">').appendTo(dataset);

    $(this).css("display", "none");
});
});



<div id="wrapper">
    <section id="core">
        <div class="profileinfo">               
            <div class="gear">
                <label>Full Name:</label>
                <span id="fullname" class="datainfo">Johnny Appleseed</span>
                <a href="#" class="editlink">Edit Info</a>
                <a class="savebtn">Save</a>
            </div>
        </div>
    </section>
</div>

Answer 1

您需要在 ajax 调用的完整部分中调用代码的 click 部分：

$.ajax({
    ...
    complete : funnction(){
        editLinkClick();
    },
    ...
});

并将其作为一个函数，您可以在初始页面加载和完成 ajax 页面加载时调用：

function editLinkClick() {
    $(".editlink").off('click').on("click", function(e){
        e.preventDefault();
        var dataset = $(this).prev(".datainfo");
        var savebtn = $(this).next(".savebtn");
        var theid   = dataset.attr("id");
        var newid   = theid+"-form";
        var currval = dataset.text();

        dataset.empty();

        $('<input type="text" name="'+newid+'" id="'+newid+'" value="'+currval+'" class="hlite">').appendTo(dataset);

        $(this).css("display", "none");
    });
}