jQuery .change () 함수 동적 인구가있는 선택 목록으로 작동하지 않습니다.

StackOverflow https://stackoverflow.com/questions/2031826

문제

모든 HTML 선택 옵션을 반환하는 Ajax 호출로 동적으로 채워진 일부 필드가 있습니다. 다음은 PHP의 일부입니다.

echo "<select name='player1' class='affector'>";
echo "<option value='' selected>--".sizeof($start)." PLAYERS LOADED--</option>";

foreach ($start as $value) {
    echo "<option value='".$value."'>".$value."</option>";
 }  
  echo "</select>";
}

이 목록이 채워진 후 변경 이벤트를 호출하려고합니다. 따라서 기본 옵션이 선택 목록 또는 동일한 클래스의 텍스트 필드에서 변경 될 때마다 양식의 다른 부분에 라디오 버튼을 비활성화합니다. . (기능 의이 부분이 작동하도록 요청한 초기 질문을 볼 수 있습니다. 여기)

$('.affector').change(function(){
       $(this).parents('tr').find('input:radio').attr('disabled', false);
});

어떤 이유로 든, 선택 필드에 적절한 클래스 이름 (Affector)을 제공하더라도 필드에서 다른 옵션을 선택하면 양식의 다른 부분이 비활성화되지 않습니다. 동일한 클래스의 정적 텍스트 필드는 잘 작동합니다. 난 그만 둔다.

어떤 아이디어?

도움이 되었습니까?

해결책

마지막 질문에 댓글을 달았습니다 ... 여기에 내가 말한 것이 있습니다.

jQuery 바인드를 사용하십시오 

function addSelectChange() {
   $('select').bind('change', function() {
       // yada yada
   });
}

Ajax 성공 기능에서 AddSelectChange를 호출하십시오. 트릭을 수행해야합니다. jQuery Live 이벤트도 살펴보십시오 (나중에 프로젝트 또는 무언가에서 현재 및 미래의 DOM 요소에 대한 이벤트를 설정하려면). 불행히도 변경 이벤트와 몇몇 다른 사람들은 아직 Live와 함께 지원되지 않습니다. 바인드는 다음으로 가장 좋은 것입니다

다른 팁

더 최신 답변 ..

요소가 동적으로 채워져 있으므로 찾고 있습니다. 이벤트 대표단.

사용하지 마십시오 .live()/.bind()/.delegate(), 그렇지만. 당신은 사용해야합니다 .on().

에 따르면 jQuery API 문서:

jQuery 1.7에서 .on() 메소드는 이벤트 핸들러를 문서에 첨부하는 것이 선호되는 방법입니다. 이전 버전의 경우 .bind() 메소드는 이벤트 핸들러를 요소에 직접 연결하는 데 사용됩니다. 핸들러는 jQuery 객체의 현재 선택된 요소에 첨부되므로 해당 요소는 호출 시점에 있어야합니다. .bind() 발생합니다. 보다 유연한 이벤트 바인딩은 이벤트 대표단에 대한 토론을 참조하십시오. .on().

따라서 다음과 같은 것을 사용합니다.

$(document).on('change', 'select', function (e) {
    /* ... */
});

.live ()를 사용하는 예제

$('#my_form_id select[name^="my_select_name"]').live('change', (function () {
    console.log( $("option:selected", this).val());
    })
 );

DOM에 동적으로 삽입 된 항목의 경우 이벤트가 

$('.selector').bind('change',function() { doWork() });

당신이 달릴 때이기 때문입니다 $(function(){}); 그리고 사용한 이벤트를 바인딩합니다 $.click 또는 $.change, 등, 당신은 요소에 이벤트를 바인딩합니다 이미 DOM에 존재합니다. 그 후 당신이하는 모든 조작은 $(function(){}); 전화. $.bind 귀하의 페이지에서 선택기의 미래 요소와 현재 요소를 찾도록 지시합니다.

.live를 시도해보십시오 :http://docs.jquery.com/events/live

문서 : 핸들러를 모든 현재 및 미래의 일치하는 요소에 대한 이벤트 (예 : 클릭)에 바인딩합니다. 사용자 정의 이벤트를 바인딩 할 수도 있습니다.

나는 만 만들 수있는 해결책으로 발견했다 

<select id="myselect"></select>

php/html 파일에서 ajax에 의해 옵션을 생성합니다. 

$.post("options_generator.php", function (data) { $("#myselect").append(data); });

옵션 _generator.php echo 옵션에서만 : 

echo "<option value='1'>1</option>";
echo "<option value='2'>2</option>";

대신 Delegate () 함수를 사용하십시오. 그것에 대해 더 자세히 설명합니다 http://www.elijahmanor.com/differences-between-jquery-bind-vs-live-vs-vs-vs-on/

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top