【问题标题】:AJAX/jQuery generated inputs not recognized by other jQuery scripts其他 jQuery 脚本无法识别 AJAX/jQuery 生成的输入
【发布时间】:2018-07-18 02:02:02
【问题描述】:

我认为这是一个相对简单的问题。出于测试目的,我将其变得如此简单,以便定位问题。

我有一个与 AJAX 一起工作的 jQuery 脚本,可以在复选框旁边返回一些结果,如下所示:

$.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');

               });
              }
             }
            });

正如您在结尾处看到的那样,对于每个结果,都会附加一个表格行,并带有一个 id 为“emailCheckboxSelect”的复选框。

现在我的问题是,这些显然是动态创建的元素,所以我相信这是这个脚本的问题(一个简单的假人只是为了定位问题)。这是应该工作的脚本:

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

这不适用于动态创建的元素。但是,我确实将&lt;input type="checkbox" id="emailCheckboxSelect"&gt;Checkbox 直接添加到我的页面,这确实引发了警报。

那么我做错了什么,我需要做什么才能让 jQuery 识别动态创建的元素?

【问题讨论】:

  • $.each(data, function(i,val) { $('').append( $('').html(''), $(' ').text(val)).appendTo('#customerEmails'); });
  • @GordonKushner - 它靠近第一个脚本中的 }else{ 之后的右下角
  • Ids 需要是唯一的,所以你需要生成单独的 ids。 M. Gara 的答案是正确的,但您也需要更正 ID。

标签: javascript jquery html ajax checkbox


【解决方案1】:
  1. 尝试在成功内的$.each(data, function() {})后面绑定点击事件:function() {}

  2. 您在 DOM 中使用了多个具有相同 ID 的元素:元素 ID 在整个文档中应该是唯一的。

  3. 改用类

您的代码将如下所示:

$.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');
            });
        }
    }
});

【讨论】:

  • 是的!非常感谢您的帮助(是的,我了解 ID,在我将其复制到我的问题时,我只是在尝试任何事情)。谢谢谢谢谢谢你的帮助!
【解决方案2】:

尝试将您的 click 事件更改为类似

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

这适用于动态创建的元素。此外,动态创建的元素使用 class 而不是 id。

【讨论】:

    猜你喜欢
    相关资源
    最近更新 更多
    热门标签