Question

嗨我运行代码时出现问题，第二个代码无法运行。但是，每当代码仍然运行时要执行的第二个代码。第一个代码为数据库和数据库重新运行添加了值，从表中删除了第二个代码量，但只删除了从环境中删除的数量。

我的问题是jQuery没有在装有ajax的div上执行！

如何在此代码的动态添加元素上绑定click事件？如何解决这个问题??

第一个代码：

<script>
            $('#submit').on('click', function (e) {
                e.preventDefault();
                var data = $('#create').serialize();
                $.ajax({
                    headers: {
                        'X-CSRF-Token': $('input[name="_token"]').val()
                    },
                    type: 'post',
                    url: '{!! URL::route('category') !!}',
                    data: data,
                    success: function (data) {
                        var dataDelete = 'category/' + data.id + '/delete';
                        var dataCat = data.cat;
                        var dataId = data.id;
                        $('#append').load('loadCat');
                    },
                    error: function (xhr, status, errorThrown) {
                        alert(JSON.parse(xhr.responseText).category[0]);
                    }

                });
                jQuery("#create").val('');
            });
        </script>

第二

<script>
        $('[data-delete]').on('click', function (e) {
            e.preventDefault();
            var this_ = $(this);
            var token = $('input[name="_token"]').attr('value');
            var id = $(this).data("id");
            $.ajax(
                    {
                        url: "{{ url('/category') }}" + '/' + id + '/delete',
                        type: 'post',
                        dataType: "JSON",
                        data: {"id": id, '_token': token},
                        success: function (data) {
                            $(this_).parent().parent().remove();
                        }
                    });
            console.log("It failed");
        });
    </script>

Answer 1

可能是因为您在动态生成的元素上绑定了click事件。

您需要做一些链接

$("#parent_id_or_class").on('click','.dynamicAddedElement_id_class',function(){
 // Code logic

});

更多详细信息，请访问 jQuery:How to bind click event on dynamically added element

Answer 2

通过这段代码解决了我的问题。

$('body').on('click', '[data-delete]',function (e) {
            e.preventDefault();
            var this_ = $(this);
            var token = $('input[name="_token"]').attr('value');
            var id = $(this).data("id");
            $.ajax(
                    {
                        url: "{{ url('/category') }}" + '/' + id + '/delete',
                        type: 'post',
                        dataType: "JSON",
                        data: {"id": id, '_token': token},
                        success: function () {
                            $(this_).parent().parent().remove();
                        }
                    });
            console.log("It failed");
        });

不工作多AJAX代码

2 个答案: