Javascript 其他jQuery脚本无法识别AJAX/jQuery生成的输入

我认为这是一个相对简单的问题。出于测试目的，我将其简化为查找问题

我有一个jQuery脚本，它与AJAX一起工作，在复选框旁边返回一些结果，如下所示：

$.ajax({
            type:'GET',
            url: '/customers/details/emails',
            dataType:'json',
            data: {
                'customerID': $('select[name=payer_id]').val(),
               '_token': $('input[name=_token]').val(),
            },
                success: function(data) {
                    $('.errorTitle').addClass('hidden');
                    $('.errorContent').addClass('hidden');

                    if ((data.errors)) {
                        setTimeout(function () {
                            $('#createOrigin').modal('show');
                            toastr.error('Check your inputs!', 'Error Alert', {timeOut: 5000});
                        }, 500);

                        if (data.errors.title) {
                            $('.errorTitle').removeClass('hidden');
                            $('.errorTitle').text(data.errors.title);
                        }
                        if (data.errors.content) {
                            $('.errorContent').removeClass('hidden');
                            $('.errorContent').text(data.errors.content);
                        }
                    } else {
                         $.each(data, function(i,val) {
                                    $('<tr>').append(
                                    $('<td>').html('<input type="checkbox" id="emailCheckboxSelect">'),
                                    $('<td>').text(val)).appendTo('#customerEmails');

               });
              }
             }
            });

这不适用于动态创建的元素。但是，我确实直接在我的页面中添加了

复选框

，这确实会触发警报

那么，我做错了什么？为了让jQuery能够识别动态创建的元素，我需要做什么

尝试在suces:function（）{}中的$.each（数据，函数（）{}）之后绑定click事件

您正在DOM中使用具有相同id的多个元素：元素id在整个文档中应该是唯一的

改用类

您的代码如下所示：

$.ajax({
    type: 'GET',
    url: '/customers/details/emails',
    dataType: 'json',
    data: {
        'customerID': $('select[name=payer_id]').val(),
        '_token': $('input[name=_token]').val(),
    },
    success: function(data) {
        $('.errorTitle').addClass('hidden');
        $('.errorContent').addClass('hidden');

        if ((data.errors)) {
            setTimeout(function() {
                $('#createOrigin').modal('show');
                toastr.error('Check your inputs!', 'Error Alert', {
                    timeOut: 5000
                });
            }, 500);

            if (data.errors.title) {
                $('.errorTitle').removeClass('hidden');
                $('.errorTitle').text(data.errors.title);
            }
            if (data.errors.content) {
                $('.errorContent').removeClass('hidden');
                $('.errorContent').text(data.errors.content);
            }
        } else {
            $.each(data, function(i, val) {
                $('<tr>').append(
                    $('<td>').html('<input type="checkbox" class="emailCheckboxSelect" />'),
                    $('<td>').text(val)).appendTo('#customerEmails');

            });
            $('.emailCheckboxSelect').click(function(e) {
                alert('clicked');
            });
        }
    }
});

$.ajax({
键入：“GET”，
url:“/customers/details/email”，
数据类型：“json”，
数据：{
'customerID'：$（'select[name=payer\u id]'）。val（），
“_-token”：$（“输入[name=_-token]”）。val（），
},
成功：功能（数据）{
$（'.errorTitle'）.addClass（'hidden'）；
$（'.errorContent'）.addClass（'hidden'）；
如果（（数据错误））{
setTimeout（函数（）{
$（'#createOrigin'）.modal（'show'）；
toastr.error（'检查您的输入！'，'错误警报'{
超时：5000
});
}, 500);
if（data.errors.title）{
$（'.errorTitle'）.removeClass（'hidden'）；
$（'.errorTitle'）.text（data.errors.title）；
}
if（data.errors.content）{
$（'.errorContent'）.removeClass（'hidden'）；
$（'.errorContent'）.text（data.errors.content）；
}
}否则{
$。每个（数据、函数（i、val）{
$（''）。追加(
$（“”）.html（“”），
$（''）.text（val））.appendTo（'#customerEmails'）；
});
$（'.emailCheckboxSelect'）。单击（函数（e）{
警报（“点击”）；
});
}
}
});

尝试在suces:function（）{}中的$.each（数据，函数（）{}）之后绑定click事件

您正在DOM中使用具有相同id的多个元素：元素id在整个文档中应该是唯一的

改用类

您的代码如下所示：

$.ajax({
    type: 'GET',
    url: '/customers/details/emails',
    dataType: 'json',
    data: {
        'customerID': $('select[name=payer_id]').val(),
        '_token': $('input[name=_token]').val(),
    },
    success: function(data) {
        $('.errorTitle').addClass('hidden');
        $('.errorContent').addClass('hidden');

        if ((data.errors)) {
            setTimeout(function() {
                $('#createOrigin').modal('show');
                toastr.error('Check your inputs!', 'Error Alert', {
                    timeOut: 5000
                });
            }, 500);

            if (data.errors.title) {
                $('.errorTitle').removeClass('hidden');
                $('.errorTitle').text(data.errors.title);
            }
            if (data.errors.content) {
                $('.errorContent').removeClass('hidden');
                $('.errorContent').text(data.errors.content);
            }
        } else {
            $.each(data, function(i, val) {
                $('<tr>').append(
                    $('<td>').html('<input type="checkbox" class="emailCheckboxSelect" />'),
                    $('<td>').text(val)).appendTo('#customerEmails');

            });
            $('.emailCheckboxSelect').click(function(e) {
                alert('clicked');
            });
        }
    }
});

$.ajax({
键入：“GET”，
url:“/customers/details/email”，
数据类型：“json”，
数据：{
'customerID'：$（'select[name=payer\u id]'）。val（），
“_-token”：$（“输入[name=_-token]”）。val（），
},
成功：功能（数据）{
$（'.errorTitle'）.addClass（'hidden'）；
$（'.errorContent'）.addClass（'hidden'）；
如果（（数据错误））{
setTimeout（函数（）{
$（'#createOrigin'）.modal（'show'）；
toastr.error（'检查您的输入！'，'错误警报'{
超时：5000
});
}, 500);
if（data.errors.title）{
$（'.errorTitle'）.removeClass（'hidden'）；
$（'.errorTitle'）.text（data.errors.title）；
}
if（data.errors.content）{
$（'.errorContent'）.removeClass（'hidden'）；
$（'.errorContent'）.text（data.errors.content）；
}
}否则{
$。每个（数据、函数（i、val）{
$（''）。追加(
$（“”）.html（“”），
$（''）.text（val））.appendTo（'#customerEmails'）；
});
$（'.emailCheckboxSelect'）。单击（函数（e）{
警报（“点击”）；
});
}
}
});

尝试将

单击事件更改为类似

$('td').on('click', '.emailCheckboxSelect', function () {
  alert('clicked');
});

这将适用于动态创建的元素。另外，对动态创建的元素使用class而不是id。
尝试将
单击事件更改为类似的内容

$('td').on('click', '.emailCheckboxSelect', function () {
  alert('clicked');
});

这将适用于动态创建的元素。另外，对动态创建的元素使用类而不是id。
$.each（数据、函数（i、val）{$（''）.append（$（''）.html（''），$（''）.text（val））.appendTo（'#customerEmails'）；}）@GordonKushner-在第一个ScriptID中的}else{之后接近右下角，因此您需要生成单独的ID。M.Gara的答案是正确的，但您也需要更正ID。$.each（数据，函数（i，val）{$（''）.append（$（''）.html（''），$（''）.text（val））.appendTo（'#customerEmails'）；}）@GordonKushner-它在}else之后的右下角{在第一个脚本中，ID必须是唯一的，因此您需要生成单独的ID。M.Gara的答案是正确的，但您也需要更正ID。是的！！非常感谢您的帮助（是的，我了解ID，在我将此复制到我的问题时，我正在尝试任何东西）。谢谢。非常感谢您的帮助！是的！！非常感谢您的帮助（是的，我了解ID，当我将此复制到我的问题时，我正在尝试任何东西）。谢谢您非常感谢您的帮助！