Question

我正在测试一些通用功能构建并遇到了这个问题 - 无法使用jQuery语法选择第一个克隆元素。是因为<build> <plugins> <plugin> <groupId>com.spotify</groupId> <artifactId>dockerfile-maven-plugin</artifactId> <version>${dockerfile-maven.version}</version> <configuration> <repository>test-docker-image</repository> <tag>${docker.tag}</tag> <buildArgs> <JAR_FILE>${project.artifactId}-${project.version}-fat.jar</JAR_FILE> <CONFIGURATION_FILE>configuration.json</CONFIGURATION_FILE> </buildArgs> </configuration> <executions> <execution> <goals> <goal>build</goal>  </goals> <phase>install</phase> </execution> </executions> </plugin> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-shade-plugin</artifactId> <version>${maven.shade.plugin.version}</version> <executions> <execution> <goals> <goal>shade</goal> </goals> <phase>package</phase> <configuration> <transformers> <transformer implementation="org.apache.maven.plugins.shade.resource.ManifestResourceTransformer"> <manifestEntries> <Main-Class>io.vertx.core.Launcher</Main-Class> <Main-Verticle>MyVerticle</Main-Verticle> </manifestEntries> </transformer> </transformers> <minimizeJar>false</minimizeJar> <outputFile>${project.build.directory}/deploy/${project.artifactId}-${project.version}-fat.jar</outputFile> </configuration> </execution> </executions> </plugin> </plugins> </build>没有出现在第一个吗？如果是这样，如何在克隆之前将eventListener添加到DOM中不存在的内容？

＆＃13;

eventListeners

＆＃13;

var cloneAndAppendCounter = 0;

function cloneAndAppend (what, target, maxClones) { 
  var id = what.attr('id');
  var clone = what.clone(true);
  var target = target;
  
  if ( cloneAndAppendCounter < maxClones ) {
    clone.attr('id', id + cloneAndAppendCounter); 
    clone.appendTo(target);
    cloneAndAppendCounter++;
  }
};

function destroyClonedElement (originalElement, when) {
  var originalElementId = originalElement.attr('id');
  var clonedElementId = originalElementId + cloneAndAppendCounter;
  var cloned = $('#' + clonedElementId);

  
  console.log('clonedElementId:', clonedElementId);
  console.log(cloned);

  if ( (cloned) && cloneAndAppendCounter > 0 ) {
    cloned.remove();
    cloneAndAppendCounter--;
    console.log('counter: ', cloneAndAppendCounter);
  };

};


$('.clone-button').click(function () {
  cloneAndAppend($('#app'), $('.container'), 4);

});


$('.destroy-button').click(function () {
  destroyClonedElement($('#app'));
});

＆＃13;

Answer 1

不，问题不在于绑定元素或不绑定到侦听器。问题出在这一行

    cloneAndAppendCounter++;

或者更确切地说，在你放置它的地方，因为它发挥了戏剧性的作用。

所以，你可以追加一个具有特定id的元素到目标然后你增加计数器。因此，当您按下remove按钮时，计数器的数量超过了附加子项的数量，这就是第一次单击无效的原因 - 因为它无效。

这是一个工作脚本（我将有问题的行重新排列到最适合的地方，除了更改了初始计数器）：

var cloneAndAppendCounter = -1;

function cloneAndAppend (what, target, maxClones) { 
  var id = what.attr('id');
  var clone = what.clone(true);
  var target = target;
  
  if ( cloneAndAppendCounter < maxClones ) {
    cloneAndAppendCounter++;
    clone.attr('id', id + cloneAndAppendCounter); 
    clone.appendTo(target);
//    console.log('counter: ', cloneAndAppendCounter);
  }
 
};

function destroyClonedElement (originalElement, when) {
  var originalElementId = originalElement.attr('id');
  var clonedElementId = originalElementId + cloneAndAppendCounter;
  var cloned =  $('#' + clonedElementId);

  
//  console.log('clonedElementId:', clonedElementId);
//  console.log(cloned);

  if ( cloned && cloneAndAppendCounter > -1 ) {
    cloned.remove();
    cloneAndAppendCounter--;
//    console.log('counter: ', cloneAndAppendCounter);
  };

};


$('.clone-button').click(function () {
  cloneAndAppend($('#app'), $('.container'), 4);
});


$(document).on('click','.destroy-button', function (e) {
  e.preventDefault();
  destroyClonedElement($('#app'))
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="clone-button">clone button</button>
<button class="destroy-button">destroy button</button>
<div class="container">
  <div id="app">test</div>
</div>

销毁克隆元素（无法选择第一个实例）

1 个答案: