如何从同名元素中获取当前的Combo/textbox id（可在新添加的元素上使用）？

Question

我正在使用JavaScript成功创建新行。

我想在'change'事件中获得当前'Combo'的'索引'，用于 的一些编程目的。

但下面的代码仅适用于第一行（在页面加载时可用）并且不适用于新添加的元素。此外，它只适用于文本框（输入），而不适用于组合（选择）。请帮忙。

使用的文本框（输入标签）代码 - 工作仅第1行：

var textboxes = $('input[name="quantity[]"]'); 
textboxes.on('blur', function() { 
    var index = textboxes.index(this); 
    alert(this.value + ', ' + index); 
}); 

使用代码连击（选择标签） - 不工作

var combos = $('combo[name="item_id[]"]'); 
combos.on('blur', function() { 
    var index = combos.index(this); 
    alert(this.value + ', ' + index); 
}); 

HTML：

<select name="item_id[]" id="item_id[]" class="combo" style="width:326px;" <?php echo empty($_GET['id'])?'':'disabled';?> onchange="showAvailableQty(this.value);"> 
<?php $item_id=!empty($record['item_id'])?$record['item_id']:-1;echo $item_registration->fillCombo($item_id);?> 
</select> 

编辑：

实际上，我希望代码不仅在下面的图片（第1行）中的行上对change-event返回item-combo（具有相同名称）的'index'，而且还要为将要添加的行点击“添加行”链接。

如果您提供了一些工作代码，请确保它也在 新增元素上运行。由于

的html代码：

<select name="item_id[]" id="item_id[]" class="combo" > option-tags </select> 

谢谢，

Answer 1

Working fiddle。

就像现在写的选择将会为标签combo搜索与名称item_id[]，你只是缺少点.在combo上课前：

var combos = $('.combo[name="item_id[]"]'); 
________________^ 

注：你可以使用目前所迷离元素对象$(this)得到index和value。

如果你要处理的新鲜DOM，你应该使用事件代表团on()动态添加到页面

希望这有助于。

$('body').on('blur', 'input[name="quantity[]"]', function() { 
 
    var index = $('input[name="quantity[]"]').index(this); 
 
    var value = $(this).val(); 
 

 
    console.log(value + ' , ' + index); 
 
}); 
 

 
$('body').on('change', '.combo[name="item_id[]"]', function() { 
 
    var index = $('.combo[name="item_id[]"]').index(this); 
 
    var value = $(this).val(); 
 

 
    console.log(value + ' , ' + index); 
 
}); 
 

 
$('body').append('<select name="item_id[]" id="item_id[]" class="combo" style="width:326px;"><option value="i_4">item_4</option><option value="i_4i">item_4i</option><select>'); 
 

 
$('body').append('<br><input name="quantity[]" type="text" value="q_4"/>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input name='quantity[]' type='text' value="q_1"/> 
 
<input name='quantity[]' type='text' value="q_2"/> 
 
<input name='quantity[]' type='text' value="q_3"/> 
 
<br> 
 
<br> 
 
<select name="item_id[]" id="item_id[]" class="combo" style="width:326px;"> 
 
    <option value="i_1">item_1</option> 
 
    <option value="i_1i">item_1i</option> 
 
</select> 
 

 
<select name="item_id[]" id="item_id[]" class="combo" style="width:326px;"> 
 
    <option value="i_2">item_2</option> 
 
    <option value="i_2i">item_2i</option> 
 
</select> 
 

 
<select name="item_id[]" id="item_id[]" class="combo" style="width:326px;"> 
 
    <option value="i_3">item_3</option> 
 
    <option value="i_3i">item_3i</option> 
 
</select> 
 
<br><br>

Answer 2

其实我想要的代码，不仅在画面（第一排）在该行上的变化事件返回项-COMBO的“索引”（具有相同名称）下面还有点击'添加行'链接时添加的行。

如果您提供了一些工作代码，请确保它也在 新增元素上运行。由于

的html代码：

<select name="item_id[]" id="item_id[]" class="combo" > option-tags </select>