jquery - CSS 在克隆元素中不起作用

Question

我对这里的 jquery 还很陌生。我有一个简单的表单，它具有添加功能，基本上通过使用 clone() 来复制表单。在克隆的表单中有一些我无法弄清楚的东西 - 元素似乎不会像第一个(原始)表单那样显示正确的 CSS，因为克隆的字段似乎不会触发事件(例如聚焦).当我单击克隆字段时，它不会显示为“已聚焦”，而且我也无法单击复选框。但是删除所有 CSS，字段(例如复选框)似乎工作正常。

  <div class="activityWrapper">
  <table id="activityEntry1" class="activityTable activitySection" cellspacing="0">
  <tbody>
  <tr>
    <td style="height:21px">
    <div class="mdl-textfield mdl-js-textfield">
    <input class="mdl-textfield__input" name="activity" type="text" id="Activity">
    <label class="mdl-textfield__label" for="activity">Activity</label>
  </div>
    </td>

    <td class="selectField">
    <div class="fieldWrapper">
    <label class="mdl-typography--body-2" for="area">
      Area
      <select class="mdl-typography--body-1" id="area">
        <option selected>Select Area</option>
        <option value="1">1</option>
        <option value="2">2</option>
      </select>
      </label>
  </div>
    </td>
  </tr>
  <tr>

    <td>
    <div class="fieldWrapper">
    <label class="mdl-typography--body-2" for="classification">
      Classification
      <select class="mdl-typography--body-1" id="classification">
        <option selected value="">Select Classification</option>
        <option value="1">1</option>
        <option value="2">2</option>
      </select>
    </label>
  </div></td>
    <td colspan="2" rowspan="2">
    <div class="mdl-textfield mdl-js-textfield">
  <textarea class="mdl-textfield__input" type="text" rows="1" id="details_of_hazard"></textarea>
  <label class="mdl-textfield__label" for="details_of_hazard">Details of Hazard</label>
</div></td>
  </tr>
  <tr>
    <td>
    <div class="fieldWrapper">
    <label class="mdl-typography--body-2" for="hazard">
      Hazard
      <select class="mdl-typography--body-1" id="hazard">
        <option selected value="">Select Hazard</option>
        <option value="1">1</option>
        <option value="2">2</option>
      </select>
    </label>
  </div>
    </td>
  </tr>
  <tr>
    <td><label class="label_risk_checkbox_items mdl-typography--body-2" for="risk_checkbox_items">Risk</label></td>
    <td colspan="2">
    <fieldset class="entrylist">
         <ul>
         <li>
         <label id="label_riskcb1" class="mdl-checkbox mdl-js-checkbox" for="input_riskcb1">
            <input type="checkbox" id="input_riskcb1" name="risk_checkbox_item" class="mdl-checkbox__input">
            <span class="mdl-checkbox__label">Hearing disability</span>
         </label>
         </li>
         <li>
         <label id="label_riskcb2" class="mdl-checkbox mdl-js-checkbox" for="input_riskcb2">
            <input type="checkbox" id="input_riskcb2" name="risk_checkbox_item" class="mdl-checkbox__input">
            <span class="mdl-checkbox__label">Partially deaf</span>
         </label>
         </li>
         <li>
         <label id="label_riskcb3" class="mdl-checkbox mdl-js-checkbox" for="input_riskcb3">
            <input type="checkbox" id="input_riskcb3" name="risk_checkbox_item" class="mdl-checkbox__input">
            <span class="mdl-checkbox__label">Totally deaf</span>
         </label>
         </li>
         <li>
         <label id="label_riskcb4" class="mdl-checkbox mdl-js-checkbox" for="input_riskcb4">
            <input type="checkbox" id="input_riskcb4" name="risk_checkbox_item" class="mdl-checkbox__input">
            <span class="mdl-checkbox__label">Raynaud's finger, white syndrome</span>
         </label>
         </li>
         <li>
         <label id="label_riskcb5" class="mdl-checkbox mdl-js-checkbox" for="input_riskcb5">
            <input type="checkbox" id="input_riskcb5" name="risk_checkbox_item" class="mdl-checkbox__input">
            <span class="mdl-checkbox__label">Injuries, trauma</span>
         </label>
         </li>
         <li>
         <label id="label_riskcb6" class="mdl-checkbox mdl-js-checkbox" for="input_riskcb6">
            <input type="checkbox" id="input_riskcb6" name="risk_checkbox_item" class="mdl-checkbox__input">
            <span class="mdl-checkbox__label">Shock</span>
         </label>
         </li>
         <li>
         <label id="label_riskcb7" class="mdl-checkbox mdl-js-checkbox" for="input_riskcb7">
            <input type="checkbox" id="input_riskcb7" name="risk_checkbox_item" class="mdl-checkbox__input">
            <span class="mdl-checkbox__label">Death</span>
         </label>
         </li>
         <li>
         <label id="label_riskcb8" class="mdl-checkbox mdl-js-checkbox" for="input_riskcb8">
            <input type="checkbox" id="input_riskcb8" name="risk_checkbox_item" class="mdl-checkbox__input">
            <span class="mdl-checkbox__label">Property damage</span>
         </label>
         </li>
         </ul>
         </fieldset>

    </td>
  </tr>
  <tr>
    <td><label class="label_control_checkbox_items mdl-typography--body-2" for="control_checkbox_items">Control</label></td>
    <td colspan="2">
    <fieldset class="entrylist">
    <ul>
         <li>
         <label id="label_controlcb1" class="mdl-checkbox mdl-js-checkbox" for="input_controlcb1">
            <input type="checkbox" id="input_controlcb1" name="control_checkbox_item" class="mdl-checkbox__input">
            <span class="mdl-checkbox__label">Inspection and maintenance of electrical facilities</span>
         </label>
         </li>
         <li>
         <label id="label_controlcb2" class="mdl-checkbox mdl-js-checkbox" for="input_controlcb2">
            <input type="checkbox" id="input_controlcb2" name="control_checkbox_item" class="mdl-checkbox__input">
            <span class="mdl-checkbox__label">Protective installations</span>
         </label>
         </li>
         <li>
         <label id="label_controlcb3" class="mdl-checkbox mdl-js-checkbox" for="input_controlcb3">
            <input type="checkbox" id="input_controlcb3" name="control_checkbox_item" class="mdl-checkbox__input">
            <span class="mdl-checkbox__label">Assured equipment grounding conductor program</span>
         </label>
         </li>
         <li>
         <label id="label_controlcb4" class="mdl-checkbox mdl-js-checkbox" for="input_controlcb4">
            <input type="checkbox" id="input_controlcb4" name="control_checkbox_item" class="mdl-checkbox__input">
            <span class="mdl-checkbox__label">Interrupters</span>
         </label>
         </li>
         <li>
         <label id="label_controlcb5" class="mdl-checkbox mdl-js-checkbox" for="input_controlcb5">
            <input type="checkbox" id="input_controlcb5" name="control_checkbox_item" class="mdl-checkbox__input">
            <span class="mdl-checkbox__label">Safe work practices</span>
         </label>
         </li>
         <li>
         <label id="label_controlcb6" class="mdl-checkbox mdl-js-checkbox" for="input_controlcb6">
            <input type="checkbox" id="input_controlcb6" name="control_checkbox_item" class="mdl-checkbox__input">
            <span class="mdl-checkbox__label">Altering techniques</span>
         </label>
         </li>
         <li>
         <label id="label_controlcb7" class="mdl-checkbox mdl-js-checkbox" for="input_controlcb7">
            <input type="checkbox" id="input_controlcb7" name="control_checkbox_item" class="mdl-checkbox__input">
            <span class="mdl-checkbox__label">Fire prevention</span>
         </label>
         </li>
         <li>
         <label id="label_controlcb8" class="mdl-checkbox mdl-js-checkbox" for="input_controlcb8">
            <input type="checkbox" id="input_controlcb8" name="control_checkbox_item" class="mdl-checkbox__input">
            <span class="mdl-checkbox__label">PPE</span>
         </label>
         </li>
         </ul>
         </fieldset>
    </td>
  </tr>
  </tbody>
</table>
<div id="addDelButtons">
  <input style="width:12em" type="button" id="btnAddActivity" value="Add Activity" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--primary">
<input style="width:12em" type="button" id="btnDelActivity" value="Remove Activity" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--primary">
</div>
</div>

</div>

jquery代码:

$(function () {
    $('#btnAddActivity').click(function () {
        var num     = $('.activitySection').length, 
            newNum  = new Number(num + 1),      
            newElem = $('#activityEntry' + num).clone(true,true).attr('id', 'activityEntry' + newNum).fadeIn('slow'); 


    // Activity - text
        newElem.find('.input_activity').attr('id', 'ID' + newNum + '_activity').attr('name', 'ID' + newNum + '_activity').val('').attr('class', 'input_activity mdl-textfield__input');
        newElem.find('.label_activity').attr('for', 'ID' + newNum + '_activity').attr('class','label_activity mdl-textfield__label');           

    //Risks - CheckBox
        newElem.find('.label_risk_checkbox_items').attr('for', 'ID' + newNum + '_risk_checkbox_items');
        newElem.find('#input_riskcb1').attr('id', 'ID' + newNum + '_input_riskcb1').attr('name', 'ID' + newNum + '_risk_checkbox_item').prop('checked', false);
        newElem.find('#input_riskcb2').attr('id', 'ID' + newNum + '_input_riskcb2').attr('name', 'ID' + newNum + '_risk_checkbox_item').prop('checked', false);
        newElem.find('#input_riskcb3').attr('id', 'ID' + newNum + '_input_riskcb3').attr('name', 'ID' + newNum + '_risk_checkbox_item').prop('checked', false);
        newElem.find('#input_riskcb4').attr('id', 'ID' + newNum + '_input_riskcb4').attr('name', 'ID' + newNum + '_risk_checkbox_item').prop('checked', false);
        newElem.find('#input_riskcb5').attr('id', 'ID' + newNum + '_input_riskcb5').attr('name', 'ID' + newNum + '_risk_checkbox_item').prop('checked', false);
        newElem.find('#input_riskcb6').attr('id', 'ID' + newNum + '_input_riskcb6').attr('name', 'ID' + newNum + '_risk_checkbox_item').prop('checked', false);
        newElem.find('#input_riskcb7').attr('id', 'ID' + newNum + '_input_riskcb7').attr('name', 'ID' + newNum + '_risk_checkbox_item').prop('checked', false);
        newElem.find('#input_riskcb8').attr('id', 'ID' + newNum + '_input_riskcb8').attr('name', 'ID' + newNum + '_risk_checkbox_item').prop('checked', false);

        newElem.find('#label_riskcb1').attr('for', 'ID' + newNum + '_input_riskcb1').attr('id','ID' + newNum + '_label_riskcb1');
        newElem.find('#label_riskcb2').attr('for', 'ID' + newNum + '_input_riskcb2').attr('id','ID' + newNum + '_label_riskcb2');
        newElem.find('#label_riskcb3').attr('for', 'ID' + newNum + '_input_riskcb3').attr('id','ID' + newNum + '_label_riskcb3');
        newElem.find('#label_riskcb4').attr('for', 'ID' + newNum + '_input_riskcb4').attr('id','ID' + newNum + '_label_riskcb4');
        newElem.find('#label_riskcb5').attr('for', 'ID' + newNum + '_input_riskcb5').attr('id','ID' + newNum + '_label_riskcb5');
        newElem.find('#label_riskcb6').attr('for', 'ID' + newNum + '_input_riskcb6').attr('id','ID' + newNum + '_label_riskcb6');
        newElem.find('#label_riskcb7').attr('for', 'ID' + newNum + '_input_riskcb7').attr('id','ID' + newNum + '_label_riskcb7');
        newElem.find('#label_riskcb8').attr('for', 'ID' + newNum + '_input_riskcb8').attr('id','ID' + newNum + '_label_riskcb8');

        //Controls - Checkbox
        newElem.find('.label_control_checkboxitem').attr('for', 'ID' + newNum + '_controls_checkbox_items');
        newElem.find('.input_controlcb1').attr('id', 'ID' + newNum + '_input_controlcb1').attr('name', 'ID' + newNum + '_control_checkbox_item').val([]);
        newElem.find('.input_controlcb2').attr('id', 'ID' + newNum + '_input_controlcb2').attr('name', 'ID' + newNum + '_control_checkbox_item').val([]);
        newElem.find('.input_controlcb3').attr('id', 'ID' + newNum + '_input_controlcb3').attr('name', 'ID' + newNum + '_control_checkbox_item').val([]);
        newElem.find('.input_controlcb4').attr('id', 'ID' + newNum + '_input_controlcb4').attr('name', 'ID' + newNum + '_control_checkbox_item').val([]);
        newElem.find('.input_controlcb5').attr('id', 'ID' + newNum + '_input_controlcb5').attr('name', 'ID' + newNum + '_control_checkbox_item').val([]);
        newElem.find('.input_controlcb6').attr('id', 'ID' + newNum + '_input_controlcb6').attr('name', 'ID' + newNum + '_control_checkbox_item').val([]);
        newElem.find('.input_controlcb7').attr('id', 'ID' + newNum + '_input_controlcb7').attr('name', 'ID' + newNum + '_control_checkbox_item').val([]);
        newElem.find('.input_controlcb8').attr('id', 'ID' + newNum + '_input_controlcb8').attr('name', 'ID' + newNum + '_control_checkbox_item').val([]);

        newElem.find('#label_controlcb1').attr('for', 'ID' + newNum + '_input_controlcb1').attr('id','ID' + newNum + '_label_controlcb1');
        newElem.find('#label_controlcb2').attr('for', 'ID' + newNum + '_input_controlcb2').attr('id','ID' + newNum + '_label_controlcb2');
        newElem.find('#label_controlcb3').attr('for', 'ID' + newNum + '_input_controlcb3').attr('id','ID' + newNum + '_label_controlcb3');
        newElem.find('#label_controlcb4').attr('for', 'ID' + newNum + '_input_controlcb4').attr('id','ID' + newNum + '_label_controlcb4');
        newElem.find('#label_controlcb5').attr('for', 'ID' + newNum + '_input_controlcb5').attr('id','ID' + newNum + '_label_controlcb5');
        newElem.find('#label_controlcb6').attr('for', 'ID' + newNum + '_input_controlcb6').attr('id','ID' + newNum + '_label_controlcb6');
        newElem.find('#label_controlcb7').attr('for', 'ID' + newNum + '_input_controlcb7').attr('id','ID' + newNum + '_label_controlcb7');
        newElem.find('#label_controlcb8').attr('for', 'ID' + newNum + '_input_controlcb8').attr('id','ID' + newNum + '_label_controlcb8');

    // Enable the "remove" button. This only shows once you have a duplicated section.
        $('#btnDelActivity').attr('disabled', false);

    // Right now you can only add 4 sections, for a total of 5. Change '5' below to the max number of sections you want to allow.
        if (newNum == 5)
        $('#btnAddActivity').attr('disabled', true); // value here updates the text in the 'add' button when the limit is reached 

    // Insert the new element after the last "duplicatable" input field
        $('#activityEntry' + num).after(newElem);
        $('#ID' + newNum + '_activity').focus();

    $("div.activityEntry:last").focus();
    });

    $('#btnDelActivity').click(function () {
    // Confirmation dialog box. Works on all desktop browsers and iPhone.
        if (confirm("Are you sure you wish to remove this section? This cannot be undone."))
            {
                var num = $('.activitySection').length;
                // how many "duplicatable" input fields we currently have
                $('#activityEntry' + num).slideUp('slow', function () {$(this).remove();
                // if only one element remains, disable the "remove" button
                    if (num -1 === 1)
                $('#btnDelActivity').attr('disabled', true);
                // enable the "add" button
                $('#btnAddActivity').attr('disabled', false).prop('value', "Add Activity");});
            }
        return false; // Removes the last section you added
    });


    // Enable the "add" button
    $('#btnAddActivity').attr('disabled', false);
    // Disable the "remove" button
    $('#btnDelActivity').attr('disabled', true);
});

您可以在此处查看演示和代码: http://codepen.io/monhammie/pen/mPVOzM

有人知道我可能遗漏了什么吗？

Answer 1

我确实必须升级新元素才能让 MDL( Material 设计精简版)的 css/js 在它们上工作。

特别是，需要更改的是这个属性:

$(newElem).find(':not([data-upgraded=""])').attr('data-upgraded', '');

然后在附加克隆元素后调用它:

$(newElem).show(200, function() {
    componentHandler.upgradeAllRegistered();
});