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

你可以看看演示＆amp;代码在这里： http://codepen.io/monhammie/pen/mPVOzM

任何人都知道我可能缺少什么？

Answer 1

我必须升级新元素才能使MDL（材料设计精简版）的css / js能够处理它们。

特别是，需要更改此属性：

Namespace YourNamesapace;

use Zend\Mail\Message as ZendMessage;
use Zend\Mime\Part as MimePart;
use Zend\Mime\Message as MimeMessage;
use Zend\Mail\Transport\Sendmail;
class Testmail
{
    public static function sendMailWithAttachment($to, $subject, $htmlMsg, $dir, $fileName)
    {
        $fileFullPath = $dir . '/' . $fileName;
        // Render content from template
        $htmlContent = $htmlMsg;
        // Create HTML part
        $htmlPart = new MimePart($htmlContent);
        $htmlPart->type = "text/html";
        // Create plain text part
        $stripTagsFilter = new \Zend\Filter\StripTags();
        $textContent = str_ireplace(array("<br />", "<br>"), "\r\n", $htmlContent);
        $textContent = $stripTagsFilter->filter($textContent);
        $textPart = new MimePart($textContent);
        $textPart->type = "text/plain";

        // Create separate alternative parts object
        $alternatives = new MimeMessage();
        $alternatives->setParts(array($textPart, $htmlPart));
        $alternativesPart = new MimePart($alternatives->generateMessage());
        $alternativesPart->type = "multipart/alternative;\n boundary=\"".$alternatives->getMime()->boundary()."\"";

        $body = new MimeMessage();
        $body->addPart($alternativesPart);


        $attachment = new MimePart( file_get_contents($fileFullPath) );
        $attachment->type = \Zend\Mime\Mime::TYPE_OCTETSTREAM;
        $attachment->filename = basename($fileName);
        $attachment->disposition = \Zend\Mime\Mime::DISPOSITION_ATTACHMENT;
        $attachment->encoding = \Zend\Mime\Mime::ENCODING_BASE64;
        $body->addPart($attachment);
        // Create mail message
        $mailMessage = new ZendMessage();
        $mailMessage->setFrom('noreply@example.com', 'from Name');
        $mailMessage->setTo($to);
        $mailMessage->setSubject($subject);
        $mailMessage->setBody($body);
        $mailMessage->setEncoding("UTF-8");
        $mailMessage->getHeaders()->get('content-type')->setType('multipart/mixed');
        $transport = new Sendmail();
        $transport->send($mailMessage);
    }
}

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

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