Question

我想我的函数定义不正确，因为当我替换表格html代码时，表格行不再触发它们所绑定的函数。

这是我的HTML表格：

<tr class="open-row-modal" href="/dashboard_staff/settings/ajax_update_period/1" data-toggle="modal" data-target="#form-modal">
          <td>bla bla</td>
          <td>30,00</td>
</tr>

还有我的JavaScript代码：

var formAjaxSubmit = function(form, modal, obj_to_replace = false) {
    $(form).submit(function (e) {
        e.preventDefault();
        $.ajax({
            type: $(this).attr('method'),
            url: $(this).attr('action'),
            data: $(this).serialize(),
            success: function (xhr, ajaxOptions, thrownError) {
                if ( $(xhr).find('.has-error').length > 0 ) {
                    $(modal).find('.modal-body').html(xhr);
                    formAjaxSubmit(form, modal);
                } else {
                    $(modal).modal('toggle');

                    if (obj_to_replace !== false) {
                        $(modal).modal('toggle');
                        obj_to_replace.parentNode.innerHTML = xhr;
                    }
                }},
            error: function (xhr, ajaxOptions, thrownError) {
                // handle response errors here
            }
        });
    });
};

$('.open-row-modal').click(function() {
    var url = $(this)[0].attributes.href;
    var parent_card = findAncestor($(this)[0], 'card-default');
    let load = $('#form-modal-body').load(url.value, function () {
        $('#form-modal').modal('toggle');
        formAjaxSubmit('#form-modal-body form', '#form-modal', parent_card);
    });
});

function findAncestor (el, cls) {
    while ((el = el.parentElement) && !el.classList.contains(cls));
    return el;
}

替换表格后，不再触发点击功能。

Answer 1

我认为这是因为元素是动态更新的。尝试使用事件委托来处理事件。在jquery中，尝试使用.on()将click事件附加到文档选择器

$(document).on('click','.open-row-modal',function() {

请参阅https://api.jquery.com/on/，以获取有关.on（）事件处理程序的文档。

替换HTML js函数后不再绑定

1 个答案: