动态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事件处理程序

回答

相关问题