Question

$(document).ready(function(){
  var elements = {
      element_no : 1,
      addNewElement : function(){
        var html = '';
        html +='<div class="test" id="test-'+ elements.element_no +'">Element No '+ elements.element_no;
        html +='<input type="file" id="test-file-'+ elements.element_no +'" />';
        html +='<input type="hidden" id="test-path-'+ elements.element_no +'" />';
        html +='</div>';
        $(html).hide().appendTo("#input-fields").slideDown("fast");
        
        $('#test-'+ elements.element_no).click(function(){
          var this_element_id = $(this).attr('id');
          var part_id = this_element_id.split('-').pop(1);
          var target_id = 'test-file-'+ part_id;
          
          // HERE I HAVE PROBLME
          // IF I HAVE TWO ELEMENT IT RUN TWO TIMES
          // IF I HAVE THREE OR MORE ELEMENTS IT RUNS ACCORDING TO THE NO OF ELEMENTS
          // WITH SAME CLASS,
          $(target_id).trigger("click");
          console.log(target_id);
        });
        elements.element_no++;
      }
  }

  $('#addNewElement').click(function(){
    elements.addNewElement();
  });
	
});

.test{
  background:#ddd;
  padding: 10px;
  margin: 5px;
  width: 200px;
}

button{
  padding : 10px;
  margin: 5px;
  width: 220px;
  background:blue;
  color: #fff;
}

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<style>
input[type=file]{
display:none;
}
</style>
</head>
<body class="descendants">
  <div id="input-fields"></div>
  <button id="addNewElement">Add New Field</button>
 </body>

</html>

我的堆栈溢出。我在执行类选择器的click事件时遇到问题。当我单击具有附有click事件的类的元素时。它执行多次，我的意思是，如果目标类有两个元素，则该类的click事件运行两次，而该类的三个元素执行三次。

我只想执行一次单击。

您可以在此处查看代码。

Answer 1

好吧，所以代码中的问题不在您确定的位置，实际上，它在这里有点领先：

$('.test').click(function(){.....

每次您单击“添加新”按钮都会执行此操作。这样做的是以下内容：

“选择所有具有类.test的元素，并为其添加处理程序”。因此，当您首次单击该按钮时，您将：

创建一个新元素（总数为1）
为所有元素附加处理程序

再次单击按钮时：

创建另一个新元素（现在共有2个）
为所有元素附加一个处理程序（因此第一个按钮现在有2个处理程序，而新按钮只有一个）

如果多次重复此操作，则每次单击按钮时，除了新按钮之外，您还将处理程序附加到所有先前的处理程序中。您可以通过单击一个新按钮3-4次然后单击“最后添加的”元素来验证这一点，您将看到它只会打印出一行。但是，如果单击“第一”按钮，它将打印出您拥有的许多元素。

要解决此问题，您只需要更改：

$('.test').click(function(){.....

到

$('#test-' + elements.element_no).click(function(){....

这里的目标是仅选择您添加的ONE元素，我们可以这样做，在您通过元素ID而不是类给出的示例中。如果您的元素没有唯一的标识方式，则需要更改其创建方式（换句话说，实际上是使用document.createElement('TAG')而不是使用.innerHTML hack）

如何使用类选择器执行所选元素的仅单击事件

1 个答案: