jQuery - 새로 만든 첫 번째 요소 만 대상으로하는 이벤트 위임

사용자가 게시물을 추가 한 다음 양식과 붙여 넣을 수있는 투표 시스템과 상호 작용할 수있는 간단한 reddit 형 시스템을 만들려고합니다.jQuery - 새로 만든 첫 번째 요소 만 대상으로하는 이벤트 위임

이벤트 위임을 활용했지만 처음 새로 만든 요소에만 영향을 미치는 것으로 보입니다. 따라서 새로 생성 된 첫 번째 요소에서 투표 시스템이 작동합니다.

그러나 후자의 경우에는 이벤트가 연결되지만 첫 번째 투표 시스템이 업데이트됩니다 (모든 게시물에는 투표 시스템이 연결됨).

도움을 주시면 감사하겠습니다. 고맙습니다.

$("#subbtn").on("click", function(event){ 

event.preventDefault(); 

var postTitle = $("#title").val(), 
    postBody = $("#content").val(); 


$("#title").val(""); 
$("#content").val(""); 

var html = "<div class='wrapper'><div class='panel panel-default'><p class='button' id='plus'>+</p><p id='count'>0</p><p class='button' id='minus'>-</p><h3>'" + postTitle + "</h3><p>" + postBody + "</p></div></div>"; 
$("body").append(html); 
}); 

var counter = 0; 

$(document).on("click", "#plus", function() { 
    counter++; 
    $("#count").text(counter); 
}); 
$(document).on("click","#minus", function() { 
    counter--; 
    $("#count").text(counter); 
});

내 HTML은 다음과 같습니다이 때문에 다음 줄의 무슨 일이 일어나고

<body> 
<div class="panel panel-default" id="formStuff"> 
      <div class="form-group"> 
      <label for="title">Title </label> </label> 
      <input type="title" id="title" class="form-control"> 
      </div> 
      <div class="form-group"> 
      <label for="content">Content </label> 
      <textArea rows="5" type="content" id="content" class="form-control"></textArea> 
      </div> 
      <input type="submit" class="btn btn-success" id="subbtn"> 
    </div> 


</body>

출처

2016-09-05 Manuel Stoilov

아이디의이 같은 ID를 가진 더 많은 요소를 찾고 아무 소용이 없기 때문에 jQuery를이 오직, 특정 ID를 가진 첫 번째 요소를 발견 할 것이다, 고유로에게이 안 어떤. – adeneo

입력 형식 제목, 이것은 나에게 새로운 것입니다 :) – madalinivascu

당신은 카운트 마이너스, 같은 ID를 가진 다수의 투표 시스템을 추가 플러스된다. 그러나 이드는 유일해야합니다. 대신 동일한 클래스가있는 클래스를 사용하고 클래스에서 셀렉터가 작동하도록하십시오. 자세한 내용은 아래 스 니펫을 확인하십시오.

$("#subbtn").on("click", function(event){ 
 

 
    event.preventDefault(); 
 

 
    var postTitle = $("#title").val(), 
 
     postBody = $("#content").val(); 
 

 

 
    $("#title").val(""); 
 
    $("#content").val(""); 
 

 
    var html = "<div class='wrapper'><div class='panel panel-default'><p class='button plus'>+</p><p class='count'>0</p><p class='button minus'>-</p><h3>'" + postTitle + "</h3><p>" + postBody + "</p></div></div>"; 
 
    $("body").append(html); 
 
}); 
 

 
$(document).on("click", ".plus", function() { 
 
    var counter = $(this).siblings(".count").text(); 
 
    counter++; 
 
    $(this).siblings(".count").text(counter); 
 
}); 
 
$(document).on("click",".minus", function() { 
 
    counter--; 
 
    var counter = $(this).siblings(".count").text(); 
 
    counter--; 
 
    $(this).siblings(".count").text(counter); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="panel panel-default" id="formStuff"> 
 
    <div class="form-group"> 
 
    <label for="title">Title </label> </label> 
 
    <input type="title" id="title" class="form-control"> 
 
</div> 
 
<div class="form-group"> 
 
    <label for="content">Content </label> 
 
    <textArea rows="5" type="content" id="content" class="form-control"></textArea> 
 
</div> 
 
<input type="submit" class="btn btn-success" id="subbtn" /> 
 
</div>

출처

2016-09-05 10:59:04

굉장! Rahul, 고마워. –

$(document).on("click", "#plus", function() {...}); 
// here you are using id selector which are unique.

출처

2016-09-05 10:44:23

jQuery - 새로 만든 첫 번째 요소 만 대상으로하는 이벤트 위임

답변

관련 문제