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

Question

我有一个表单，允许用户根据需要添加无限数量的额外行(文本字段输入)。我已经成功地使用 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);

Answer 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);