为递归添加的字段访问 jquery 类名

Posted 2023-05-09

【中文标题】为递归添加的字段访问 jquery 类名

【英文标题】：accessing jquery class names for recursively added fields

【发布时间】：2011-12-20 17:04:54

【问题描述】：

我有一个表单，允许用户根据需要添加无限数量的额外行（文本字段输入）。我已经成功地使用 jQuery 来创建这些额外的字段。为了这个例子，我们假设以下内容被多次克隆：

<input name="datain_pline_1" id="datain_pline_1" value="" type="text" class="calc_input" maxlength="4" />
<span id="dataout_currentmult_1"></span>

在每个新实例中，数字都在递增（因此 datain_pline_1 变为 datain_pline_2、datain_pline_3 等……我的输出跨度也相应递增）。

然后我在输入到每个字段的数据上运行一些 AJAX，并在相关的 span 标签中返回一些输出。我的代码（见下文）适用于第一个字段（#1），但我不知道如何编辑它以将 .change 函数应用于我所有具有相似名称的 ID...然后如何应用相关数字也与跨度输出有关。我对 jQuery 比较陌生，但在阅读这些内容后，我认为这不仅可行，而且相对简单……但对我来说肯定不简单！非常感谢任何帮助！

$("#datain_pline_1").change(function()

    //Get the data from the field
    var pline = $('input[name=datain_pline_1]');

    //organize the data
    var data = 'pline=' + pline.val() ;

    //start the ajax
    $.ajax(
        //this is the php file that processes the data and returns values
        url: "ajax_getPlineData.php",
        //GET method is used
        type: "GET",
        //pass the data
        data: data,
        //Do not cache the page
        cache: false,
        //success
        success: function (outputPlineData) 
            if (outputPlineData!='') 
                //success
                $('#dataout_currentmult_1').html(outputPlineData);
             else 
                alert('Unexpected Error');
            
        
    );
    return true;
);

我需要帮助的地方是前两行，将其应用于所有相关的文本输入字段（并将值捕获到变量）：

$("#datain_pline_1").change(function()
var pline = $('input[name=datain_pline_1]');

以及输出返回数据的底部：

$('#dataout_currentmult_1').html(outputPlineData);

【问题讨论】：

感谢@swatkins 和@scrappedcola！我只能选择一个“正确”的答案，但确实是你们两个的结合让我朝着正确的方向前进。谢谢！！

【参考方案1】：

好的，您需要更动态地访问这些：

// change your spans to have a class
<input name="datain_pline_1" id="datain_pline_1" value="" type="text" class="calc_input" maxlength="4" />
<span id="dataout_currentmult_1" class="calc_output"></span>

然后，将您所说的那两行更改为：

// target all of the inputs (they all have the class "calc_input")
// updated to "live" per @scrappedcola's comment
$(".calc_input").live('change', function()

//and
// target the span that is directly after the input that fired the change event
$(this).next('.calc_output').html(outputPlineData);

【讨论】：

好的...我正在添加这些东西...但是如果我没有确定当前的“计数”，我如何获得我的文本字段的值？我目前正在使用：var pline = $('input[name=datain_pline_1]');

但仅使用更改处理程序不会获得未来动态添加的元素，除非您重新附加事件处理程序。

哦，抱歉，我错过了：您可以使用$(this).val() 访问启动更改事件的输入值——因此将var pline = $('input[name=datain_pline_1]'); 行更改为var pline = $(this);

@scrappedcola - 这取决于 何时 附加更改处理程序（在将新元素添加到 dom 之前或之后）。但我同意你使用live 或delegate 方法。

【参考方案2】：

对于change 处理程序，如果所有输入都具有相同的类，则可以使用 jquery 的委托或实时函数，它们会将更改事件应用于该标识符的所有当前和未来元素。对于跨度，您可以更改跨度id 与datain_pline_1_SPAN 类似，这样当更改事件发生时，您可以获得当前 id 和基于该 id 的跨度。例如：

$(".calc_input").live("change", function()
    var id = this.id;
     var span = $("#" + id + "_SPAN");
    //do rest of stuff here
);

或

$(document).delegate(".calc_input", "change", function()
     var id = this.id;
     var span = $("#" + id + "_SPAN");
     //do rest of stuff here
);

【讨论】：

我不明白这段代码的作用。它本质上是否将输入字段的 id 嵌入到 span 的 id 中？如果是这样，那似乎是参考这些的好方法。上述两个选项（代表和直播）有什么区别？

是的，建议将输入的 id 嵌入到 span 中，这样当您想要更改值时，您可以直接获取正确的值。可以在此处找到有关差异的好教程：alfajango.com/blog/…。有一些差异，但主要的差异是事件的附加方式。委托附加到元素，其中 live 附加到元素并冒泡到文档根。委托效率更高一些，但两者都可以。代表来自 jquery 1.4+。 Live 包含在 jquery 1.3+ 中。