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");
    });
}

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

1 个答案: