javascript - 当它在数组中时如何设置选择元素数组索引并绑定(bind)到模糊事件

Question

我有选择 dom 和输入文本框的数组。在输入(特定索引)的模糊事件上想要在相同索引的选择 dom 值中设置元素。

我的绑定(bind)正在工作，但在不同输入框的每个模糊事件之后，它会返回 0。

我无法根据给定索引设置选择值，即(下拉)

JSFiddle

我的代码如下。

$(document).ready(function (){
    var i =1;
    $('#addme').on('click', function(){

        var  test = '<tr class="employee"><td><input type="text" id="emp_id['+i+']" /></td><td><select id="emp_name['+i+']" '
        test += '<option value="-1" >Please Select </option><option value="e0001" >James Smith</option><option value="e0002" >Roger Sm</option>'  
        test +='<option value="e0003" >Elina Lobo</option></select></td></tr>'   
         
        $('#addme').after(test);
        i++;
    });

    $(".employee input").live('blur',function(){
        var inputIndex = $(this).index();
        var inputValue = $(this).val();
        alert("Input Index is :" +  inputIndex + ' and value is ' + inputValue);

        $('#emp_name[inputIndex]').each(function(){
            if(this.value == inputValue){
                $('#emp_name[inputIndex]').val($(this).val()); 
                    return false;
            }
            alert("Please iput valid value");
            $('#emp_name[inputIndex]').val('-1');
        });
    });
});
    </script>
    <table />
    <tr class="employee">
        <td><input class="employee" type="text" id="emp_id[0]" /></td>
        <td><select id="emp_name[0]" name="emp_name">
            <option value="-1" >Please Select </option>
            <option value="e0001" >James Smith</option>         
            <option value="e0002" >Roger Sm</option>
            <option value="e0003" >Elina Lobo</option>
        </select></td>
    </tr> 

    <input type="button" id="addme" value="ADD ME"/> 

  </body>
 </html> 

Answer 1

当您在单击按钮时动态添加元素时，您需要委托(delegate)事件。

所以$(".employee input").live('blur',function(){

应该看起来像这样

$(staticContainer).on('blur',".employee input", function(){

staticContainer 是与元素绑定(bind)时已经存在于 DOM 中的元素。

关闭容器可以获得更好的性能。

您的代码也存在多个问题..

最好将行附加到表中，以便选择器返回表内的正确元素。

$('#addme').after(test);

应该是

$('table').append(test);

接下来这个选择器不会替换索引值

$('#emp_name[inputIndex]')

应该是

$('#emp_name[' + inputIndex + ']')

最后，您访问索引的方式是完全错误的。

您正在尝试获取相对于其他元素的当前输入。所以

var inputIndex = $(this).index();

应该看起来像

var inputIndex = $('input').index(this);//这将给出正确的值。

<强> Check Fiddle