Question

我有以下div：

<div id="template">

    <label><h1>Enter your title</h1></label>
    <input type="text" name="title[]" placeholder="Enter your title">
    <label><p>Enter your text</p></label>
    <textarea type="text" name="textbox1[]" placeholder="Enter your text"></textarea>

</div>

我克隆这个div并使用JavaScript附加它。单击一个按钮，div应该通过切换.open类来打开。

相关JavaScript：

function addClonedDiv() {

    var div = document.getElementById('template');
    window.clonedDiv = div.cloneNode(true);
    document.getElementById('otherDiv').appendChild(clonedDiv);
    clonedDiv.firstChild.className = "newDiv";
}

function addIframe() {

    clonedDiv.firstChild.classList.toggle("open");

}

（有两个按钮，一个克隆div，另一个显示它，默认情况下隐藏，otherDiv是我想要添加新div的div。我添加class =“newDiv”因为我会以后需要它用于与这个问题无关的其他目的，但是，我想包括它，因为我不知道这可能是问题）。 CSS中的.open类：

.open {
    visibility: visible;
    width: 100%;
}

但是，当我单击应该显示div的按钮时，我在控制台中收到此错误消息：无法读取未定义的属性“切换”。我不确定为什么新的div会被定义，以及如何解决这个问题。

我在这里阅读了其他问题，说我必须深入克隆div，我尝试应用（如你所见），但我仍然收到相同的错误信息。我知道克隆不会克隆事件处理程序，但我很确定，这不是我的问题。

我读了很多其他问题并做了我的研究，然而，我无法解决问题。我绝对想在JavaScript中解决这个问题而不是jQuery。

Answer 1

这里有一些问题（甚至更多的是你的小提琴，但是因为你似乎直到你引用的错误信息，我会免费修复小提琴的问题。）

错误重播：

function addClonedDiv() {
  var div = document.getElementById('template');
  window.clonedDiv = div.cloneNode(true);
  document.getElementById('otherDiv').appendChild(clonedDiv);
  clonedDiv.firstChild.className = "newDiv";
};
// open is reserved
function open_() {
  console.log(clonedDiv);
  clonedDiv.firstChild.classList.toggle("open");
};

#template {
  visibility: hidden;
}

.newDiv.open {
  visibility: visible;
}

<div id="otherDiv">
  <button onclick="addClonedDiv()">
    Add Item
    </button>
  <button onclick="open_()">
    Open
    </button>
</div>
<div id="template">

  <label><h1>Enter your title</h1></label>
  <input type="text" name="title[]" placeholder="Enter your title">
  <label><p>Enter your text</p></label>
  <textarea type="text" name="textbox1[]" placeholder="Enter your text"></textarea>
</div>

所以让我们先修复错误信息：

clonedDiv.firstChild是一个Node，甚至是一个textNode，代表一个新的行字符。所以你可以为它设置一个属性，但它不会从Element或HTMLElement原型继承，因此没有classList属性。

你想要的是clonedDiv.firstElementChild（也在addCloneDiv中）。

然后，Node.cloneNode将在Element上调用时复制Element的所有属性。因此，您的clonedDiv也会拥有id="template"属性。这意味着您的.newDiv.open规则的重要性低于#template规则。

function addClonedDiv() {
  var div = document.getElementById('template');
  window.clonedDiv = div.cloneNode(true);
  document.getElementById('otherDiv').appendChild(clonedDiv);
  clonedDiv.firstElementChild.className = "newDiv"; // grab the first Element
  clonedDiv.removeAttribute('id'); // ids must be unique per document
};

function open_() {

  clonedDiv.firstElementChild.classList.toggle("open");

};

#template,
.newDiv {
  visibility: hidden;
}

.newDiv.open {
  visibility: visible;
}

<div id="otherDiv">
  <button onclick="addClonedDiv()">
    Add Item
    </button>
  <button onclick="open_()">
    Open
    </button>
</div>
<div id="template">

  <label><h1>Enter your title</h1></label>
  <input type="text" name="title[]" placeholder="Enter your title">
  <label><p>Enter your text</p></label>
  <textarea type="text" name="textbox1[]" placeholder="Enter your text"></textarea>

</div>

现在我不确定这是不是你想要发生的事情，但我会让你找到自己。

Answer 2

试试这个：

＆＃13;

<?xml version='1.0' encoding='UTF-8'?>

<server xmlns="urn:jboss:domain:5.0">
    <extensions>
        ...
    </extensions>
    <management>
        <security-realms>
            <security-realm name="ManagementRealm">
                ...
            </security-realm>
            <security-realm name="ApplicationRealm">
                <server-identities>
                    <ssl>
                        <keystore path="apps.keystore\\keystoreFile.jks" relative-to="jboss.server.config.dir" keystore-password="martin123" alias="serverkey" key-password="martin123" generate-self-signed-certificate-host="localhost"/>
                    </ssl>
                </server-identities>
                <authentication>
                    <local default-user="$local" allowed-users="*" skip-group-loading="true"/>
                    <properties path="application-users.properties" relative-to="jboss.server.config.dir"/>
                </authentication>
                <authorization>
                    <properties path="application-roles.properties" relative-to="jboss.server.config.dir"/>
                </authorization>
            </security-realm>
            <security-realm name="AeroGearRealm">
                <server-identities>
                    <ssl>
                        <keystore path="apps.keystore\\keystoreFile.jks" relative-to="jboss.server.config.dir" keystore-password="martin123" alias="serverkey" key-password="martin123" generate-self-signed-certificate-host="localhost"/>
                    </ssl>
                </server-identities>
            </security-realm>
        </security-realms>
        <audit-log>
            ...
        </audit-log>
        <management-interfaces>
            <http-interface security-realm="ManagementRealm">
                <http-upgrade enabled="true"/>
                <socket-binding http="management-http"/>
            </http-interface>
        </management-interfaces>
        <access-control provider="simple">
            <role-mapping>
                <role name="SuperUser">
                    <include>
                        <user name="$local"/>
                    </include>
                </role>
            </role-mapping>
        </access-control>
    </management>
    <profile>
        <subsystem xmlns="urn:jboss:domain:logging:3.0">
            ...
        </subsystem>
        <subsystem xmlns="urn:jboss:domain:batch-jberet:2.0">
            ...
        </subsystem>
        <subsystem xmlns="urn:jboss:domain:bean-validation:1.0"/>
        <subsystem xmlns="urn:jboss:domain:core-management:1.0"/>
        <subsystem xmlns="urn:jboss:domain:datasources:5.0">
            <datasources>
                <datasource jndi-name="java:/OtherAppDS" pool-name="OtherAppDS" enabled="true">
                    ...
                </datasource>
                <datasource jndi-name="java:jboss/datasources/UnifiedPushDS" pool-name="UnifiedPushDS" enabled="true" use-ccm="false">
                    <connection-url>jdbc:mysql://localhost:3306/unifiedpush?useUnicode=true&amp;characterEncoding=UTF-8</connection-url>
                    <driver>mysql</driver>
                    <pool>
                        <max-pool-size>25</max-pool-size>
                    </pool>
                    <security>
                        <user-name>unifiedpush</user-name>
                        <password>unifiedpush</password>
                    </security>
                    <timeout>
                        <blocking-timeout-millis>5000</blocking-timeout-millis>
                    </timeout>
                </datasource>
                <drivers>
                    <driver name="mysql" module="com.mysql">
                        <driver-class>com.mysql.jdbc.Driver</driver-class>
                    </driver>
                    <driver name="h2" module="com.h2database.h2">
                        <xa-datasource-class>org.h2.jdbcx.JdbcDataSource</xa-datasource-class>
                    </driver>
                </drivers>
            </datasources>
        </subsystem>
        <subsystem xmlns="urn:jboss:domain:deployment-scanner:2.0">
            <deployment-scanner path="deployments" relative-to="jboss.server.base.dir" scan-interval="5000" runtime-failure-causes-rollback="${jboss.deployment.scanner.rollback.on.failure:false}"/>
        </subsystem>
        <subsystem xmlns="urn:jboss:domain:ee:4.0">
            ...
        </subsystem>
        <subsystem xmlns="urn:jboss:domain:ejb3:5.0">
            ...
        </subsystem>
        <subsystem xmlns="urn:wildfly:elytron:1.2" final-providers="combined-providers" disallowed-providers="OracleUcrypto">
            ...
        </subsystem>
        <subsystem xmlns="urn:jboss:domain:io:2.0">
            <worker name="default"/>
            <buffer-pool name="default"/>
        </subsystem>
        <subsystem xmlns="urn:jboss:domain:infinispan:4.0">
            <cache-container name="server" default-cache="default" module="org.wildfly.clustering.server">
                <local-cache name="default">
                    <transaction mode="BATCH"/>
                </local-cache>
            </cache-container>
            <cache-container name="web" default-cache="passivation" module="org.wildfly.clustering.web.infinispan">
                <local-cache name="passivation">
                    <locking isolation="REPEATABLE_READ"/>
                    <transaction mode="BATCH"/>
                    <file-store passivation="true" purge="false"/>
                </local-cache>
            </cache-container>
            <cache-container name="ejb" aliases="sfsb" default-cache="passivation" module="org.wildfly.clustering.ejb.infinispan">
                <local-cache name="passivation">
                    <locking isolation="REPEATABLE_READ"/>
                    <transaction mode="BATCH"/>
                    <file-store passivation="true" purge="false"/>
                </local-cache>
            </cache-container>
            <cache-container name="hibernate" module="org.hibernate.infinispan">
                <local-cache name="entity">
                    <transaction mode="NON_XA"/>
                    <eviction strategy="LRU" max-entries="10000"/>
                    <expiration max-idle="100000"/>
                </local-cache>
                <local-cache name="local-query">
                    <eviction strategy="LRU" max-entries="10000"/>
                    <expiration max-idle="100000"/>
                </local-cache>
                <local-cache name="timestamps"/>
            </cache-container>
        </subsystem>
        <subsystem xmlns="urn:jboss:domain:iiop-openjdk:2.0">
            <orb socket-binding="iiop"/>
            <initializers security="identity" transactions="spec"/>
            <security server-requires-ssl="false" client-requires-ssl="false"/>
        </subsystem>
        <subsystem xmlns="urn:jboss:domain:jaxrs:1.0"/>
        <subsystem xmlns="urn:jboss:domain:jca:5.0">
            <archive-validation enabled="true" fail-on-error="true" fail-on-warn="false"/>
            <bean-validation enabled="true"/>
            <default-workmanager>
                <short-running-threads>
                    <core-threads count="50"/>
                    <queue-length count="50"/>
                    <max-threads count="50"/>
                    <keepalive-time time="10" unit="seconds"/>
                </short-running-threads>
                <long-running-threads>
                    <core-threads count="50"/>
                    <queue-length count="50"/>
                    <max-threads count="50"/>
                    <keepalive-time time="10" unit="seconds"/>
                </long-running-threads>
            </default-workmanager>
            <cached-connection-manager/>
        </subsystem>
        <subsystem xmlns="urn:jboss:domain:jdr:1.0"/>
        <subsystem xmlns="urn:jboss:domain:jmx:1.3">
            <expose-resolved-model/>
            <expose-expression-model/>
            <remoting-connector/>
        </subsystem>
        <subsystem xmlns="urn:jboss:domain:jpa:1.1">
            <jpa default-datasource="" default-extended-persistence-inheritance="DEEP"/>
        </subsystem>
        <subsystem xmlns="urn:jboss:domain:jsf:1.0"/>
        <subsystem xmlns="urn:jboss:domain:jsr77:1.0"/>
        <subsystem xmlns="urn:jboss:domain:mail:3.0">
            <mail-session name="default" jndi-name="java:jboss/mail/Default">
                <smtp-server outbound-socket-binding-ref="mail-smtp" ssl="false" username="xxxxxxx" password="xxxxxxx"/>
                <pop3-server outbound-socket-binding-ref="mail-pop3" username="xxxxxxx" password="xxxxxxx"/>
            </mail-session>
        </subsystem>
        <subsystem xmlns="urn:jboss:domain:messaging-activemq:2.0">
            <server name="default">
                <security-setting name="#">
                    <role name="guest" send="true" consume="true" create-non-durable-queue="true" delete-non-durable-queue="true"/>
                </security-setting>
                <address-setting name="#" dead-letter-address="jms.queue.DLQ" expiry-address="jms.queue.ExpiryQueue" max-size-bytes="10485760" page-size-bytes="2097152" message-counter-history-day-limit="10"/>
                <address-setting name="jms.queue.AdmPushMessageQueue" max-redelivery-delay="5000" max-delivery-attempts="-1" redelivery-multiplier="1.5" redelivery-delay="1500"/>
                <address-setting name="jms.queue.AdmTokenBatchQueue" address-full-policy="FAIL" max-size-bytes="40000"/>
                <address-setting name="jms.queue.APNsPushMessageQueue" max-redelivery-delay="5000" max-delivery-attempts="-1" redelivery-multiplier="1.5" redelivery-delay="1500"/>
                <address-setting name="jms.queue.APNsTokenBatchQueue" address-full-policy="FAIL" max-size-bytes="40000"/>
                <address-setting name="jms.queue.GCMPushMessageQueue" max-redelivery-delay="5000" max-delivery-attempts="-1" redelivery-multiplier="1.5" redelivery-delay="1500"/>
                <address-setting name="jms.queue.GCMTokenBatchQueue" address-full-policy="FAIL" max-size-bytes="40000"/>
                <address-setting name="jms.queue.MPNSPushMessageQueue" max-redelivery-delay="5000" max-delivery-attempts="-1" redelivery-multiplier="1.5" redelivery-delay="1500"/>
                <address-setting name="jms.queue.MPNSTokenBatchQueue" address-full-policy="FAIL" max-size-bytes="40000"/>
                <address-setting name="jms.queue.SimplePushMessageQueue" max-redelivery-delay="5000" max-delivery-attempts="-1" redelivery-multiplier="1.5" redelivery-delay="1500"/>
                <address-setting name="jms.queue.SimplePushTokenBatchQueue" address-full-policy="FAIL" max-size-bytes="40000"/>
                <address-setting name="jms.queue.WNSPushMessageQueue" max-redelivery-delay="5000" max-delivery-attempts="-1" redelivery-multiplier="1.5" redelivery-delay="1500"/>
                <address-setting name="jms.queue.WNSTokenBatchQueue" address-full-policy="FAIL" max-size-bytes="40000"/>
                <address-setting name="jms.queue.MetricsQueue" max-delivery-attempts="-1"/>
                <address-setting name="jms.queue.TriggerMetricCollectionQueue" max-delivery-attempts="-1" redelivery-delay="1000"/>
                <address-setting name="jms.queue.BatchLoadedQueue" max-delivery-attempts="-1"/>
                <address-setting name="jms.queue.AllBatchesLoadedQueue" max-delivery-attempts="-1"/>
                <http-connector name="http-connector" socket-binding="http" endpoint="http-acceptor"/>
                <http-connector name="http-connector-throughput" socket-binding="http" endpoint="http-acceptor-throughput">
                    <param name="batch-delay" value="50"/>
                </http-connector>
                <in-vm-connector name="in-vm" server-id="0">
                    <param name="buffer-pooling" value="false"/>
                </in-vm-connector>
                <http-acceptor name="http-acceptor" http-listener="default"/>
                <http-acceptor name="http-acceptor-throughput" http-listener="default">
                    <param name="batch-delay" value="50"/>
                    <param name="direct-deliver" value="false"/>
                </http-acceptor>
                <in-vm-acceptor name="in-vm" server-id="0">
                    <param name="buffer-pooling" value="false"/>
                </in-vm-acceptor>
                <jms-queue name="ExpiryQueue" entries="java:/jms/queue/ExpiryQueue"/>
                <jms-queue name="DLQ" entries="java:/jms/queue/DLQ"/>
                <jms-queue name="InstitutionInterfaceReceiverQueue" entries="java:/jms/queue/InstitutionInterfaceReceiverQueue"/>
                <jms-queue name="MailQueue" entries="java:/jms/queue/mail"/>
                <jms-queue name="AdmPushMessageQueue" entries="queue/AdmPushMessageQueue"/>
                <jms-queue name="AdmTokenBatchQueue" entries="queue/AdmTokenBatchQueue"/>
                <jms-queue name="APNsPushMessageQueue" entries="queue/APNsPushMessageQueue"/>
                <jms-queue name="APNsTokenBatchQueue" entries="queue/APNsTokenBatchQueue"/>
                <jms-queue name="GCMPushMessageQueue" entries="queue/GCMPushMessageQueue"/>
                <jms-queue name="GCMTokenBatchQueue" entries="queue/GCMTokenBatchQueue"/>
                <jms-queue name="MPNSPushMessageQueue" entries="queue/MPNSPushMessageQueue"/>
                <jms-queue name="MPNSTokenBatchQueue" entries="queue/MPNSTokenBatchQueue"/>
                <jms-queue name="SimplePushMessageQueue" entries="queue/SimplePushMessageQueue"/>
                <jms-queue name="SimplePushTokenBatchQueue" entries="queue/SimplePushTokenBatchQueue"/>
                <jms-queue name="WNSPushMessageQueue" entries="queue/WNSPushMessageQueue"/>
                <jms-queue name="WNSTokenBatchQueue" entries="queue/WNSTokenBatchQueue"/>
                <jms-queue name="MetricsQueue" entries="queue/MetricsQueue"/>
                <jms-queue name="TriggerMetricCollectionQueue" entries="queue/TriggerMetricCollectionQueue"/>
                <jms-queue name="TriggerVariantMetricCollectionQueue" entries="queue/TriggerVariantMetricCollectionQueue"/>
                <jms-queue name="BatchLoadedQueue" entries="queue/BatchLoadedQueue"/>
                <jms-queue name="AllBatchesLoadedQueue" entries="queue/AllBatchesLoadedQueue"/>
                <jms-queue name="FreeServiceSlotQueue" entries="queue/FreeServiceSlotQueue"/>
                <jms-topic name="MetricsProcessingStartedTopic" entries="topic/MetricsProcessingStartedTopic"/>
                <connection-factory name="InVmConnectionFactory" entries="java:/ConnectionFactory" connectors="in-vm"/>
                <connection-factory name="RemoteConnectionFactory" entries="java:jboss/exported/jms/RemoteConnectionFactory" connectors="http-connector"/>
                <pooled-connection-factory name="activemq-ra" entries="java:/JmsXA java:jboss/DefaultJMSConnectionFactory" connectors="in-vm" transaction="xa"/>
            </server>
        </subsystem>
        <subsystem xmlns="urn:jboss:domain:naming:2.0">
            <remote-naming/>
        </subsystem>
        <subsystem xmlns="urn:jboss:domain:pojo:1.0"/>
        <subsystem xmlns="urn:jboss:domain:remoting:4.0">
            <endpoint/>
            <http-connector name="http-remoting-connector" connector-ref="default" security-realm="ApplicationRealm"/>
        </subsystem>
        <subsystem xmlns="urn:jboss:domain:resource-adapters:5.0"/>
        <subsystem xmlns="urn:jboss:domain:request-controller:1.0"/>
        <subsystem xmlns="urn:jboss:domain:sar:1.0"/>
        <subsystem xmlns="urn:jboss:domain:security-manager:1.0">
            <deployment-permissions>
                <maximum-set>
                    <permission class="java.security.AllPermission"/>
                </maximum-set>
            </deployment-permissions>
        </subsystem>
        <subsystem xmlns="urn:jboss:domain:security:2.0">
            ...
        </subsystem>
        <subsystem xmlns="urn:jboss:domain:transactions:4.0">
            ...
        </subsystem>
        <subsystem xmlns="urn:jboss:domain:undertow:4.0">
            <buffer-cache name="default"/>
            <server name="default-server">
                <http-listener name="default" socket-binding="http" redirect-socket="https" enable-http2="true"/>
<!--                <https-listener name="https" socket-binding="https" security-realm="ApplicationRealm" enable-http2="true"/>-->
                <https-listener name="https" socket-binding="https" security-realm="AeroGearRealm"/>
                <host name="default-host" alias="localhost">
                    <location name="/" handler="welcome-content"/>
                    <filter-ref name="server-header"/>
                    <filter-ref name="x-powered-by-header"/>
                    <http-invoker security-realm="ApplicationRealm"/>
                </host>
            </server>
            <servlet-container name="default">
                <jsp-config/>
                <websockets/>
            </servlet-container>
            <handlers>
                <file name="welcome-content" path="${jboss.home.dir}/welcome-content"/>
            </handlers>
            <filters>
                <response-header name="server-header" header-name="Server" header-value="WildFly/11"/>
                <response-header name="x-powered-by-header" header-name="X-Powered-By" header-value="Undertow/1"/>
            </filters>
        </subsystem>
        <subsystem xmlns="urn:jboss:domain:webservices:2.0">
            <wsdl-host>${jboss.bind.address:127.0.0.1}</wsdl-host>
            <endpoint-config name="Standard-Endpoint-Config"/>
            <endpoint-config name="Recording-Endpoint-Config">
                <pre-handler-chain name="recording-handlers" protocol-bindings="##SOAP11_HTTP ##SOAP11_HTTP_MTOM ##SOAP12_HTTP ##SOAP12_HTTP_MTOM">
                    <handler name="RecordingHandler" class="org.jboss.ws.common.invocation.RecordingServerHandler"/>
                </pre-handler-chain>
            </endpoint-config>
            <client-config name="Standard-Client-Config"/>
        </subsystem>
        <subsystem xmlns="urn:jboss:domain:weld:4.0"/>
    </profile>
    <interfaces>
        <interface name="management">
            <inet-address value="${jboss.bind.address.management:127.0.0.1}"/>
        </interface>
        <interface name="public">
            <any-address/>
        </interface>
        <interface name="unsecure">
            <inet-address value="${jboss.bind.address.unsecure:127.0.0.1}"/>
        </interface>
    </interfaces>
    <socket-binding-group name="standard-sockets" default-interface="public" port-offset="${jboss.socket.binding.port-offset:0}">
        <socket-binding name="management-http" interface="management" port="${jboss.management.http.port:9980}"/>
        <socket-binding name="management-https" interface="management" port="${jboss.management.https.port:9983}"/>
        <socket-binding name="ajp" port="${jboss.ajp.port:8009}"/>
        <socket-binding name="http" port="${jboss.http.port:8080}"/>
        <socket-binding name="https" port="${jboss.https.port:8443}"/>
        <socket-binding name="iiop" interface="unsecure" port="3528"/>
        <socket-binding name="iiop-ssl" interface="unsecure" port="3529"/>
        <socket-binding name="txn-recovery-environment" port="4712"/>
        <socket-binding name="txn-status-manager" port="4713"/>
        <outbound-socket-binding name="mail-smtp">
            <remote-destination host="mail.kontent.com" port="25"/>
        </outbound-socket-binding>
        <outbound-socket-binding name="mail-pop3">
            <remote-destination host="pop.kontent.com" port="110"/>
        </outbound-socket-binding>
    </socket-binding-group>
</server>

＆＃13;

var clonedDiv;
function clone(){
    clonedDiv = document.getElementById('template').cloneNode(true);
    document.getElementById('otherDiv').appendChild(clonedDiv);
    clonedDiv.className = "newDiv";
}
function show(){
(!clonedDiv.classList.contains("open")) ? clonedDiv.classList.add("open"):clonedDiv.classList.remove("open");
}

＆＃13;

.newDiv{
  visibility: hidden;
}
.open {
    visibility: visible;
    width: 100%;
}

＆＃13;

而不是切换

在JavaScript中克隆后，classList.toggle（）无法正常工作

2 个答案: