2015-02-04 10 views
1

그래서 현재 동적으로 확장 할 수있는 양식을 작성 중입니다. 양식에 동적으로 추가 된 각 행에는 jQuery 유형 선행 플러그인을 사용하여 제안 사항을 표시하는 입력 필드가 들어 있습니다.선행 선택 이벤트 (jQuery)의 동적 바인딩

입력 필드에 해당하는 각 새 행에 대해서도 선 택된 선행을 바인드하려고합니다. 이벤트는 제안 이름과 해당 ID를 데이터베이스에 리턴합니다.

function initIdStorageBinding(){ 
    stringField = '#INPUT_FIELD'+counter; 
    idField = '#INPUT_FIELD_ID'+counter; 

    $(stringField).bind('typeahead:selected', function(obj, data, name) { 
     $(idField).val(data['id']); 
     $(stringField).val(data['name']); 
    } 
} 

이 함수는 현재 행에 대한 인덱스 인 counter에 now 행이 추가 될 때마다 호출됩니다.

문제점 : 바인딩은 항상 현재 선택된 필드가 아닌 양식에 추가 된 마지막 입력 필드에 값을 삽입합니다. 같은 바인딩이 아닌 동적 추가

:

function doBindings(){ 
    $('#INPUT_FIELD1').bind('typeahead:selected', function(obj, data, name) { 
     $('#INPUT_FIELD_ID1').val(data['id']); 
     $('#INPUT_FIELD1').val(data['name']); 
    }); 

    $('#INPUT_FIELD2').bind('typeahead:selected', function(obj, data, name) { 
     $('#INPUT_FIELD_ID2').val(data['id']); 
     $('#INPUT_FIELD2').val(data['name']); 
    }); 
} 

잘 작동합니다.

해결 방법에 대한 아이디어가 있습니까?

+0

카운터는 전역 변수입니다. 멍청한데, – Maeximus

답변

1

그래서 전략을 전환 일을 시도 중 꽤 많은 시간 후, 대신 카운터 변수 및 해당 ID 등으로부터 모든 요소를 ​​바인딩의 클래스를 사용해야합니다. 다음 코드는 작업을 완료합니다.

$('.CLASS_OF_INPUT_FIELDS').each(function(index,element){ 
    $(element).bind('typeahead:selected', function(obj, data, name) { 
     $(element).next('.CLASS_OF_HIDDEN_ID_FIELD').val(data['id']); 
     $(element).val(data['name']); 
    }) 
}); 
+0

나는 당신이 당신 자신의 질문에 답했다는 것을 알고 있지만 같은 문제로 나를 도왔습니다. 정말 고마워요! – Rafael

0

당신은,처럼 initIdStorageBinding 기능에

function initIdStorageBinding(counter) { // pass counter here 
    stringField = '#INPUT_FIELD'+counter; 
    idField = '#INPUT_FIELD_ID'+counter; 

    $(stringField).bind('typeahead:selected', function(obj, data, name) { 
     $(idField).val(data['id']); 
     $(stringField).val(data['name']); 
    }); 
} 

counter 변수를 전달하거나 어떤 함수에서 내부적으로 액세스 할 수 있도록 카운터 변수 글로벌 확인해야합니다.

또한 제 생각에 당신은

function initIdStorageBinding(){ 
    stringField = '.your-string-class'; 
    idField = '.other-field-class'; 

    $(stringField).bind('typeahead:selected', function(obj, data, name) { 
     $(idField).val(data['id']); 
     $(stringField).val(data['name']); 
    } 
} 
+0

카운터가 글로벌이라는 것을 잊어 버렸습니다. 죄송합니다. Id 대신 클래스를 사용하면 효과가 없습니다. – Maeximus