javascript - Ajax 请求仅在第一次有效，在加载部分页面后不再有效

Question

HTML代码:

<div class="table-responsive">
    <table id="dataTable" class="table table-hover table-separated">
        <tbody>
            <tr id="test-1">
                <td class="test">
                    <form action="{{ url('/psy/update-test-status/'.$test->id) }}" method="POST" class="m-0">
                        <select name="status" class="form-control status_select">
                            <option class="text-success" value="active" selected>En ligne</option>
                            <option class="text-warning" value="inactive" >Inactif</option>
                            <option class="text-danger"  value="canceled" >Annulé</option>
                        </select>
                    </form>
                </td>
            </tr>
            <tr id="test-2">
                <td class="test">
                    <form action="{{ url('/psy/update-test-status/'.$test->id) }}" method="POST" class="m-0">
                        <select name="status" class="form-control status_select">
                            <option class="text-success" value="active" selected>En ligne</option>
                            <option class="text-warning" value="inactive" >Inactif</option>
                            <option class="text-danger"  value="canceled" >Annulé</option>
                        </select>
                    </form>
                </td>
            </tr>
            <tr id="test-3">
                <td class="test">
                    <form action="{{ url('/psy/update-test-status/'.$test->id) }}" method="POST" class="m-0">
                        <select name="status" class="form-control status_select">
                            <option class="text-success" value="active" selected>En ligne</option>
                            <option class="text-warning" value="inactive" >Inactif</option>
                            <option class="text-danger"  value="canceled" >Annulé</option>
                        </select>
                    </form>
                </td>
            </tr>
        </tbody>
    </table>
</div>

JavaScript 代码:

$(document).ready(function () {

        // change color of selected element according to its value
        function statusSelect(element) {
            if ($(element).val() == 'active') {
                $(element).removeClass('text-warning');
                $(element).removeClass('text-danger');
                $(element).addClass('text-success');
            }
            else if ($(element).val() == 'inactive') {
                $(element).removeClass('text-success');
                $(element).removeClass('text-danger');
                $(element).addClass('text-warning');
            }
            else if ($(element).val() == 'canceled') {
                $(element).removeClass('text-success');
                $(element).removeClass('text-warning');
                $(element).addClass('text-danger');
            }
        }

        // Post form data and load the table again
        function updateTestStatus(element) {
            form = $(element).parent('form');
            tr = form.closest('tr');
            dest_url = form.attr('action');
            $.ajax({
                type:"POST",
                url:dest_url,
                data:form.serialize(),
                dataType: 'json',
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                success: function(data){
                    if($.isEmptyObject(data.errors)){
                        $('#dataTable').load(document.URL +  ' #dataTable');
                        statusSelect($(element));
                    }
                    else {
                        // code...
                    }
                },
                errors: function (data) {
                    // code...
                }
            });
        }

        $('select.status_select').each(function (elem) {
            statusSelect($(this));
        });

        $('select.status_select').on('change', function (e) {
            statusSelect($(this));
            updateTestStatus($(this));
        });
});

---

其实我至少有四个问题:

• 我不确定如何订购和/或叠加函数 each和 on change
• 我不能只加载 tr ajax 成功回调中的元素:加载完整 table 时工作正常但是当我做 $('#dataTable tr#test-1').load(document.URL + ' #dataTable tr#test-1');它加载 tr在前一个里面 tr而不是更换它。
• statusSelect方法(更改所选输入文本的颜色)第一次有效，但在 Ajax 加载后不再有效
• updateTestStatus方法(Ajax 调用然后重新加载页面的一部分)第一次有效，但之后就不再有效了。

---

编辑:第 3 和第 4 个问题现已解决(成功回调中的函数在加载函数完成之前执行)

更新代码:

function statusSelect(element) {
            if ($(element).val() == 'active') {
                $(element).removeClass('text-warning');
                $(element).removeClass('text-danger');
                $(element).addClass('text-success');
            }
            else if ($(element).val() == 'inactive') {
                $(element).removeClass('text-success');
                $(element).removeClass('text-danger');
                $(element).addClass('text-warning');
            }
            else if ($(element).val() == 'canceled') {
                $(element).removeClass('text-success');
                $(element).removeClass('text-warning');
                $(element).addClass('text-danger');
            }
        }

        function updateTestStatus(element) {

            form = $(element).parent('form');
            tr = form.closest('tr');
            dest_url = form.attr('action');
            $.ajax({
                type:"POST",
                url:dest_url,
                data:form.serialize(),
                dataType: 'json',
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                success: function(data){
                    if($.isEmptyObject(data.errors)){
                        var row_id = tr.attr('id');
                        $('#dataTable #'+row_id).load(document.URL +  ' #dataTable #'+row_id, function() {
                            testStatus();
                        });
                    }
                    else {
                        // code...
                    }
                },
                errors: function (data) {
                    // code...
                }
            });
        }

        function testStatus () {
            $('select.status_select').each(function (elem) {
                statusSelect($(this));
            });

            $('select.status_select').on('change', function (e) {
                statusSelect($(this));
                updateTestStatus($(this));
            });
        }

        testStatus();
    });

我还有一个问题:我希望能够只加载 <tr>而不是所有的<table> ...

$('#dataTable tr#test-1').load(document.URL + ' #dataTable tr#test-1');给我:

<table><tr id="test-1"><tr id="test-1">...</tr></tr></table>

编辑 2:已解决!

加载方法似乎“附加到内部”，并没有像我相信的那样“替换”。这条线起到了作用:

$('#dataTable #'+row_id).load(document.URL +  ' #dataTable #'+row_id, function() {
    $(this).children(':first').unwrap(); // This one
    testStatus();
});

我得到了这个线程的帮助:How can I use jQuery.load to replace a div including the div

---

最终编辑

ajax 函数有时会因为 each 而被调用多次。这是我解决它的方法:

success: function(data){
    if($.isEmptyObject(data.errors)){
        var row_id = tr.attr('id');
        $('#dataTable #'+row_id).load(document.URL +  ' #dataTable #'+row_id, function() {
            $(this).children(':first').unwrap();

            $('#'+row_id+' select.status_select').on('change', function (e) {
                statusSelect($(this));
                updateTestStatus($(this));
            });
            $('select.status_select').each(function (elem) {
                statusSelect($(this));
            });
        });
    }
}

Answer 1

Ajax 动态加载 HTML。 JavaScript 不能像预期的那样处理动态 HTML。

您可以将 JavaScript 包装在一个函数中，并在加载/就绪时调用一次，并在成功 时再次调用。

$(document).ready(function () {
   function ajaxFunction (args) {
        $.ajax({
            type:"POST",
            url: url,
            data: data,
            dataType: 'json',
            headers: {header object},
            success: function(data){

            afterAjax (); // call the functions you want to perform again
                // code...
            },
            errors: function (data) {
                // code...
            }
        });
    }
    function afterAjax () {
        // functions to perform again after dynamic HTML load
    }
    afterAjax ()
});