Question

我正在尝试创建一个支持AJAX的表单，检查代码是否有效。我的表单开头是这样的：

<div id="codechecker_container">
<input type="text" class="codechecker" id="code_1" name="codes[]" />
<span id="message_1"></span>
</div>
<input type="submit" id="add_button" value="Add another" />
<input type="submit" value="Submit" />

单击ID为“add_button”的提交按钮时，会将以下内容附加到div：

<input type="text" class="codechecker" id="code_2" name="codes[]" />
<span id="message_2"></span>

然后每按一次数字递增。

当在文本框中键入内容时，将检查代码并根据AJAX请求的结果显示消息。我试图让每个文本输入/跨度消息对彼此独立工作。但是，我只能使用函数来处理原始表单元素。

我没有犯错，但其他人都没有发生任何事情。

这是我用来添加表单元素的内容：

$('#add_another_code_button').click(function(event) {
        event.preventDefault();
        var num  = $(this).attr('class');
        var html = 'Voucher Code '+num.toString(10)+':<br /><input type="text" class="codechecker" id="code_'+num.toString(10)+'" name="codes[]" /><span id="message_'+num+'"></span>';
        $('#codechecker_container').append(html);
        $(this).removeClass(num.toString(10));
        num++;
        $(this).addClass(num.toString(10));
    });

这就是我用来显示结果的结果：

$('.codechecker').keyup( 
        function(k)
        {   
            var voucher_code     = $(this).val();
            var inputarray       = $(this).attr('id').split('_');
            var num              = inputarray[1];
            var holder           = $('#message_'+num.toString(10));

            if (voucher_code.length > 2)
            {   
                $.getJSON('.myajaxurl, function(data)
                {   
                    if (data.voucher.pass == 1)
                    {
                        holder.css({color:'green'});    
                    }
                    else
                    {
                        holder.css({color:'red'});
                    }

                    holder.text(data.voucher.status);
                });
            }
        }
    );

有人可以帮忙吗？

任何建议表示赞赏。

Answer 1

试试这个......

$('.codechecker').keyup(  
        function(k) 
        {   
                    $('.codechecker').each
                    (
                        function()
                        {
                            var voucher_code     = $(this).val(); 
                            var inputarray       = $(this).attr('id').split('_'); 
                            var num              = inputarray[1]; 
                            var holder           = $('#message_'+num.toString(10)); 

                            if (voucher_code.length > 2) 
                            {    
                                    $.getJSON('.myajaxurl, function(data) 
                                    {    
                                            if (data.voucher.pass == 1) 
                                            { 
                                                    holder.css({color:'green'});     
                                            } 
                                            else 
                                            { 
                                                    holder.css({color:'red'}); 
                                            } 

                                            holder.text(data.voucher.status); 
                                    }); 
                            } 
                        }
        } 
    );

Answer 2

使用$.delegate：

$('#codechecker_container').delegate('.codechecker', 'keyup', function (e) {
    // event handler
});

$（'selector'）返回一个DOM元素数组，这些元素在追加新元素时不会更新。

Javascript - 使用类激活多个文本框的事件

2 个答案: