Question

我有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_spending.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));
        }
    });
});

我遇到的问题是必须在来自ajax响应html的每个动作上加载这两个文件$.getScript('js/delete_spending.js'); $.getScript('js/edit_spending.js');，否则它不会工作......并且你可以看到它被加载到很多方面http://i.imgur.com/gAMJiJT.jpg

我试着在最后加载它，在准备结束时把它放在脚本标签中，没有任何作用，而且我没有足够的经验来理解为什么，也许它与范围有关，但是我认为javascript只是加载了我拥有的任何脚本并且它在任何地方都找到它，猜测与jquery不一样

Answer 1

据我所知，发生这种情况的原因与为页面动态添加的元素所发生的原因相同。让我详细了解这里似乎发生的事情（如果我错了，请纠正我）。

当您使用jQuery选择元素，然后添加事件处理程序（例如.click(function() {});）时，它会将事件处理程序添加到它已选择的元素。

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

$(document).on('eventNames', 'selector', function() { // HANDLER FUNCTION //})'

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

$(document).on('click','.delete_spending', function() { // YOUR FUNCTION // });

Answer 2

如果我说得对，问题是你每次向DOM添加支出时都需要注册点击功能吗？

在这种情况下，您可以使用jQuery.on()。它在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));
        }
    });
});
}

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

2 个答案: