jQuery - 最初に新しく作成された要素を対象にしたイベント委任

ユーザーが投稿を追加してフォームに貼り付ける投票システムと対話できる単純なレッド・ライクのシステムを作成しようとしています。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があってはならないように、同じIDを持つ複数の要素を探しにはポイントがありませんようにjQueryだけで、これまで、任意のIDを持つ最初の要素を見つけるだろう、ユニークですどれか。 – adeneo

入力タイプのタイトル、これは私にとっては新鮮です:) – madalinivascu

はあなたが数えるとマイナス、同じIDを持つ複数の投票システムを追加プラスされています。しかし、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 - 最初に新しく作成された要素を対象にしたイベント委任

答えて

関連する問題