동적 jQuery 이벤트 핸들러

Question

drupal의 목록 드롭 다운으로 .change 이벤트를 처리하기 위해 동적 jQuery 코드를 만들려고했습니다. (아래 그림 참조)이이 입력 필드 중 하나 위의 레이블을 변경하도록되어

jQuery(document).ready(function($) { 
    $("#edit-submitted-row-1-program").change(function() { 
     if($(this).val() === 'DreamSpark Standard'){ 
      $("label[for='edit-submitted-row-1-extended-department-name'").html('Campus Name'); 
      console.log('Yes it is supposed to change!'); 
     } else { 
      $("label[for='edit-submitted-row-1-extended-department-name'").html('Extended department name'); 
     } 
     console.log($(this).val()); 
     }).change(); 
    } 
}); 

을 '드림 스파크 표준'가 선택되어있는 경우 : 그래서 같은 사업부 ID를 하드 코딩 할 때 제대로 작동하려면 얻었다.

그러나, 내가 일을 끝내고 싶은 것은이 같은 것입니다 :

당신이 필요한만큼 줄을 추가 할 수 있으며, 이벤트 핸들러가 적절한의 레이블을 변경합니다 레이블.

다음 코드를 시도했지만 확실히 for() 루프를 수행하고 있으므로 foreach() 또는 이와 유사한 코드를 사용해야합니다. 여기

jQuery(document).ready(function($) { 
    for (var i = 0; i < 5; i++) { 
     $("#edit-submitted-row-" + i + "-program").change(function() { 
      var j = i; 
      if($(this).val() === 'DreamSpark Standard'){ 
       $("label[for='edit-submitted-row-" + j + "-extended-department-name'").html('Campus Name'); 
       console.log('Yes it is supposed to change!'); 
      } else { 
       $("label[for='edit-submitted-row-" + j + "-extended-department-name'").html('Extended department name'); 
      } 
      console.log($(this).val()); 
     }).change(); 
    } 
}); 

는 중요한 HTML 코드의 조각입니다 :

이

<div id="webform-component-row-1" class="webform-layout-box horiz"> 
    <div class="form-item webform-component webform-component-textfield" id="webform-component-row-1--subscription-id"> 
     <label for="edit-submitted-row-1-subscription-id">Subscription ID <span class="form-required" title="This field is required.">*</span></label> 
     <input type="text" id="edit-submitted-row-1-subscription-id" name="submitted[row_1][subscription_id]" value="" size="18" maxlength="128" class="form-text required" /> 
    </div> 
    <div class="form-item webform-component webform-component-select" id="webform-component-row-1--program"> 
     <label for="edit-submitted-row-1-program">Program <span class="form-required" title="This field is required.">*</span></label> 
     <select id="edit-submitted-row-1-program" name="submitted[row_1][program]" class="form-select required"><option value="" selected="selected">- Select -</option><option value="DreamSpark Premium">DreamSpark Premium</option><option value="DreamSpark Standard">DreamSpark Standard</option><option value="Other">Other</option></select> 
    </div> 
    <div class="form-item webform-component webform-component-textfield" id="webform-component-row-1--extended-department-name"> 
     <label for="edit-submitted-row-1-extended-department-name">Extended department name </label> 
     <input type="text" id="edit-submitted-row-1-extended-department-name" name="submitted[row_1][extended_department_name]" value="" size="26" maxlength="128" class="form-text" /> 
    </div> 
</div> 

(각 행이 1 씩 증가되므로, 다음 행이 될 '웹 양식 구성 요소 - 행 2'와 것 등)

내가 드루팔을 통해 같은 HTML 마크 업 data- 태그 또는 여분의 물건을 추가 할 수 없습니다, 난 그냥 주어진 클래스와 ID의 출력과 함께 일해야 명심하십시오!

고마워요! 그들은 당신이 아직 존재하지 않는 요소에 대한 이벤트를 결합 할 수 있도록로

Answer 1

루프를 사용할 필요가 없으며 클래스 선택기를 사용하여 일반화 된 코드를 작성할 수 있습니다.

<div id="webform-component-row-1" class="webform-layout-box horiz"> 
    <div class="form-item webform-component webform-component-textfield" id="webform-component-row-1--subscription-id"> 
     <label for="edit-submitted-row-1-subscription-id">Subscription ID <span class="form-required" title="This field is required.">*</span></label> 
     <input type="text" id="edit-submitted-row-1-subscription-id" name="submitted[row_1][subscription_id]" value="" size="18" maxlength="128" class="form-text required" /> 
    </div> 
    <div class="form-item webform-component webform-component-select" id="webform-component-row-1--program"> 
     <label for="edit-submitted-row-1-program">Program <span class="form-required" title="This field is required.">*</span></label> 
     <select id="edit-submitted-row-1-program" name="submitted[row_1][program]" class="form-select required"><option value="" selected="selected">- Select -</option><option value="DreamSpark Premium">DreamSpark Premium</option><option value="DreamSpark Standard">DreamSpark Standard</option><option value="Other">Other</option></select> 
    </div> 
    <div class="form-item webform-component webform-component-textfield" id="webform-component-row-1--extended-department-name"> 
     <label for="edit-submitted-row-1-extended-department-name" class="edit-submitted-row-extended-department-name">Extended department name </label> 
     <input type="text" id="edit-submitted-row-1-extended-department-name" name="submitted[row_1][extended_department_name]" value="" size="26" maxlength="128" class="form-text" /> 
    </div> 
</div> 

는

jQuery(function ($) { 
    $(".webform-layout-box select").change(function() { 
     var $lbl = $(this).closest('.webform-layout-box').find('.edit-submitted-row-extended-department-name'); 
     if ($(this).val() === 'DreamSpark Standard') { 
      $lbl.html('Campus Name'); 
     } else { 
      $lbl.html('Extended department name'); 
     } 
    }).change(); 
}); 

데모 : 레이블을 Fiddle

• 우리는 .webform-layout-box 요소 내부의 select 요소에 변경 이벤트를 대상으로라는 새로운 클래스 edit-submitted-row-extended-department-name
• 을 추가
• 변경되었을 때 .edit-submitted-row-extended-department-name 요소가 같은 .webform-layout-box 안에 있고 그 텍스트가 바뀌면

Answer 2

당신은 정말

$.on and $.live 

을 보일 것입니다. 그런 다음, 그 후에도 요소에 대한 작업을 계속할 수 있습니다.