動態jQuery事件處理程序

我一直在嘗試創建一個動態jQuery代碼來處理在drupal中使用列表下拉列表的.change事件。我在div ID像這樣硬編碼時，它才能正常工作：如果選擇「的DreamSpark標準」動態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(); 
    } 
});

據說這是爲了改變上述輸入字段的一個標籤（如下圖所示）。

不過，我希望最終做的是這樣的：

Dynamic line adding

如果你需要，你可以添加儘可能多的行，而該事件處理程序將改變適當的標籤標籤。

我試過了下面的代碼，但它肯定是錯的，因爲我只是在做一個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-標籤或多餘的東西，因爲它通過Drupal的，而我只是給定類和ID的輸出工作！

謝謝你們！

來源

2014-02-25 Ian Ryan Clarke

不需要使用循環，可以使用類選擇器編寫通用代碼。

<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

爲標籤添加edit-submitted-row-extended-department-name
稱爲一個新的類，我們針對.webform-layout-box元素中的更改事件到select元素
更改時在同一.webform-layout-box內找到.edit-submitted-row-extended-department-name元素並更改其文字

來源

2014-02-25 15:22:46

看起來不錯！不過，您似乎已將一個類添加到標籤中： '擴展部門名稱'即使我不能通過drupal添加該類。我怎麼能用'for'來做呢？ –

@RyanClarke你將無法編輯任何屬性？ –

我可以編輯屬性，但在drupal中，我無法將類添加到該標籤，因爲drupal會動態添加標籤：S 編輯：我會回覆您，我可以找到Drupal插件允許我添加一個類！ –

你真的應該查找

$.on and $.live

，因爲它們允許你綁定對於尚不存在元素的事件。然後，在此之後，您可以繼續處理元素。

來源

2014-02-25 15:08:58

動態jQuery事件處理程序

回答

相關問題