1

select dom と input textbox の配列があります。（特定のインデックスの）入力のぼかしイベントで、同じインデックスの選択DOM値に要素を設定したい。

私のバインドは機能していますが、異なる入力ボックスの各ぼかしイベントの後、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>
4

2 に答える 2

1

ボタンのクリックで要素を動的に追加しているので、イベントを委任する必要があります..

そう$(".employee input").live('blur',function(){

このように見えるはずです

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

staticContainerは、要素が要素にバインドされたときに DOM に既に存在する要素です。

コンテナを近づけると、パフォーマンスが向上します。

また、コードに複数の問題があります..

行をテーブルに追加して、セレクターがテーブル内の正しい要素を返すようにすることをお勧めします。

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

察するに

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

次に、このセレクターはインデックス値を置き換えません

$('#emp_name[inputIndex]')

察するに

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

最後に、インデックスにアクセスする方法は完全に間違っています。

他の要素に対応する現在の入力を取得しようとしています。そう

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

のように見えるはず

var inputIndex = $('input').index(this);// 正しい値が返されます。

フィドルをチェック

于 2013-05-20T07:26:31.510 に答える
0

まず、jQuery .Index() は、セレクター フィールドのインデックスではなく、e のすべての兄弟のインデックスを見つけることを意味します。そうする場合は、セレクター パラメーターが必要です。そう

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

に変更する必要があります

var inputIndex = $(this).index(".employee input");

その後、インデックス部分は正常に機能します。

第二に、私は実際にあなたのぼかしイベントコード部分を理解していません.select domの同じインデックスを設定したいと言ったのに、なぜ値を比較するのですか?そして、jQuery属性セレクターを使用していますが、一致する要素が表示されませんでした.選択したすべての DOM を選択しようとしていると思いますが、ループでアラートを出そうとしていますか?それは良い考えではないと思います。

この部分を再構築する必要があると思います。ロジックがなく、今では非常に読みにくいです。

于 2013-05-20T07:57:38.743 に答える