如何在AJAX内容上使用javascript代码，而不必每次都包含它

我有index.php，用户可以输入日、月、年等，并使用ajax显示结果

$(document).ready(function() {
    $('#searchBtn').click(function() {
                    $.ajax({
                        url: 'get_spendings.php',
                        data: {
                            day: $('[name=day]').val(),
                            weekday: $('[name=weekday]').val(),
                            month: $('[name=month]').val(),
                            year: $('[name=year]').val(),
                            perpage: $('[name=perpage]').val()
                        },
                        success: function(result) {
                            $('#content').html(result);

                            $.getScript('js/delete_spending.js');
                            $.getScript('js/edit_spending.js');
                        }
                    });
                });

                $('#searchBtn').trigger('click');
});

在get_spendings.php上，我将结果作为完整的html输出发送

这是1结果的代码

echo '<div id="spending' . $row['id'] . '">&nbsp;&nbsp;&nbsp;&nbsp;' .
            '<span id="price' . $row['id'] . '">' . $row['price'] . '</span>' .
            '<span id="currency' . $row['id'] . '">' . $row['value'] . '</span>: ' .
            '<span id="title' . $row['id'] . '">' . $row['title'] . '</span>' .
            '&nbsp;<button class="edit_spending" value="' . $row['id'] . '">e</button>' .
            '&nbsp;<button class="delete_spending" value="' . $row['id'] . '">x</button></div>';

这是ajax最后调用的delete_expensing.js javascript文件

$('.delete_spending').click(function(e) {
    var s_id = Number($(this).val());
    var s_price = $('#price' + s_id).text();

    $.ajax({
        url: 'delete_spending.php',
        type: 'POST',
        data: {
            id: s_id,
            price: s_price
        },
        success: function(result) {
            var json = jQuery.parseJSON(result);

            $('#spending' + s_id).fadeOut(300, function() {
                $('#spending' + s_id).remove();
            });

            var date_id = $('#spending' + s_id).parent().closest('div').attr('id');
            var num_spendings = $('#'+date_id).children().length;

            if (num_spendings - 1 <= 1)
                $('#'+date_id).fadeOut(300, function() {
                    $('#'+date_id).remove();
                });

            $('#total_spendings').html(Number(Number($('#total_spendings').text()) - Number(json.old_price)).toFixed(2));
        }
    });
});

我的问题是这两个文件$.getScript'js/delete_expensing.js'；$。getScript'js/edit_expensing.js'；必须在来自ajax响应html的每个操作上加载，否则它将无法工作。。。正如你所看到的，它的装载量非常大

---

我试着在最后加载它，把它放在准备就绪的最后一个脚本标签中，什么都不起作用，我没有足够的经验来理解为什么，也许它与作用域有关，但我认为javascript只是加载了我所有的脚本，它到处都可以找到，从我所知道的，我猜这与jquery不一样，发生这种情况的原因与任何动态添加到页面的元素发生这种情况的原因相同。让我详细介绍一下这里发生的事情，如果我错了，请纠正我

使用jQuery选择元素，然后添加事件处理程序，例如.clickfunction{}；，它将事件处理程序添加到已选择的元素中

这意味着您需要为动态添加的元素重新绑定事件处理程序，因为它们将在没有处理程序的情况下添加。幸运的是，jQuery有一个简单的解决方案，这就是使用

$document.on'eventNames'，selector'，function{//HANDLER function//}

每次您列出的事件发生时都会触发此操作，因为它发生在文档中，然后jQuery会去查找任何匹配的选择器是否为true，然后处理程序会发生在这些元素中的每一个。在你的情况下，你会想要这样的东西：

---

$document.on'click'，'.删除函数{///您的函数//}

如果我没弄错的话，问题是每次向DOM添加支出时都需要注册click函数

在这种情况下，您可以使用。它在API中表示，绑定选择器时不必存在DOM ite

然而，我一直都有它不能正常工作的问题。您可以创建一个注册它的函数，而不是一直加载新文件：

function registerDeleteSpending(){
$('.delete_spending').click(function(e) {
    var s_id = Number($(this).val());
    var s_price = $('#price' + s_id).text();

    $.ajax({
        url: 'delete_spending.php',
        type: 'POST',
        data: {
            id: s_id,
            price: s_price
        },
        success: function(result) {
            var json = jQuery.parseJSON(result);

            $('#spending' + s_id).fadeOut(300, function() {
                $('#spending' + s_id).remove();
            });

            var date_id = $('#spending' + s_id).parent().closest('div').attr('id');
            var num_spendings = $('#'+date_id).children().length;

            if (num_spendings - 1 <= 1)
                $('#'+date_id).fadeOut(300, function() {
                    $('#'+date_id).remove();
                });

            $('#total_spendings').html(Number(Number($('#total_spendings').text()) - Number(json.old_price)).toFixed(2));
        }
    });
});
}

---

这个方法的问题是，第二次点击按钮就可以了，可能是因为第一次它注册了。。。这个问题可以解决吗？您需要确保将函数放入全局脚本中。在主标记中，放入$function{///当页面加载完成时应该发生的所有事情//}将所有处理程序函数放入其中，这样它们就会一直工作。等等，您是否将.clickfunction{}放入了.on'click'中？.clickfunction{}不再是必需的。如果我们的任一解决方案有效，请接受答案，这样它就不是一个未回答的问题！到目前为止两人都没有工作。。。我将重构其中一些，稍后再试