动态jQuery事件处理程序

Question

I have been trying to create a dynamic jQuery code to handle an .change event with a list dropdown in drupal. I got it to work properly when hardcoding in the div id like so:

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();
    }
});

This is supposed to change the label above one of the input fields (as shown below) if 'DreamSpark Standard' is selected.

However, what I want to end up doing is something like this:

Where you can add as many lines as you need, and the event handler will change the label of the appropriate label.

I have tried the following code, but it is definitely wrong, as I'm just doing a for() loop when I know I should be doing a foreach() or something similar.

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();
    }
});

Here is the snippet of HTML code that matters:

<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>

(Each row will be incremented by 1, so the next row would be 'webform-component-row-2' and so on)

Keep in mind I can't add data- tags or extra stuff in the HTML markup as it through drupal, and I just have to work with the given classes and ID's output!

Thanks guys!

Answer 1

There is no need to use a loop, you can write a generalized code using the class selectors.

<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>

then

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();
});

Demo: Fiddle

• To label added a new class called edit-submitted-row-extended-department-name
• We target the change event to the select element inside the .webform-layout-box element
• When it is changed find the .edit-submitted-row-extended-department-name element within the same .webform-layout-box and change its text

Answer 2

You should really look up

$.on and $.live 

as they allow you to bind events for elements that do not exist yet. Then, after that you can continue working on elements.