sirsanta sirsanta - 21 days ago 6
CSS Question

multi IDs with the same javascript code

I have this javascript code which work with this html code

<span "id="comment'.$id.'">Comment</span>


$id
is different number for example (1 ,2 ,3 ,4 )

HTML code


  1. <span "id="comment1">Comment</span>

  2. <span "id="comment2">Comment</span>

  3. <span "id="comment3">Comment</span>



JavaScript code

$('[id^=comment]').click(function() {


this.insertAdjacentHTML("afterend", '\
<div class="cmt-container" >\
<div class="new-com-bt">\
<span >Write a comment ...</span>\
</div>\
<div class="new-com-cnt">\
<textarea class="the-new-com"></textarea>\
<div class="bt-add-com">Post comment</div>\
<div class="bt-cancel-com">Cancel</div>\
</div>\
<div class="clear"></div>\
</div>'

);

$(function(){
//alert(event.timeStamp);
$('.new-com-bt').click(function(event){

$(this).hide();
$('.new-com-cnt').show();
$('#name-com').focus();
});

/* when start writing the comment activate the "add" button */
$('.the-new-com').bind('input propertychange', function() {
$(".bt-add-com").css({opacity:0.6});
var checklength = $(this).val().length;
if(checklength){ $(".bt-add-com").css({opacity:1}); }
});


/* on clic on the cancel button */
$('.bt-cancel-com').click(function(){
$('.the-new-com').val('');
$('.new-com-cnt').fadeOut('fast', function(){
$('.new-com-bt').fadeIn('fast');
});
});

// on post comment click
$('.bt-add-com').click(function(){
var theCom = $('.the-new-com');
var theName = $('#name-com');
var theMail = $('#mail-com');

if( !theCom.val()){
alert('You need to write a comment!');
}else{
$.ajax({
type: "POST",
url: "/",
data: 'act=add-com&id_post='+'&comment='+theCom.val(),
success: function(html){
theCom.val('');
theMail.val('');
theName.val('');
$('.new-com-cnt').hide('fast', function(){
$('.new-com-bt').show('fast');
$('.new-com-bt').before(html);
})
}
});
}
});

});


});

what i want to do is when comment1 clicked code work only for comment1

Answer

By using var child = $('[id^=comment]') you select all the elements that match that selector. In order to select only the element that triggers your specific event, you have to use:

var child = $(e.target);

Or simpler:

var child = $(this);

Beware:

In your case, you're going to get an error no matter what you use, because insertAdjacentHTML is not a jQuery method, but a native JavaScript one. So, you only have to use this or e.target.


Full Code:

/* ----- JavaScript ----- */
$('[id^=comment]').click(function() {
   this.insertAdjacentHTML("afterend", '\
     <div class="cmt-container" >\
       <div class="new-com-bt">\
         <span >Write a comment ...</span>\
       </div>\
       <div class="new-com-cnt">\
         <textarea class="the-new-com"></textarea>\
         <div class="bt-add-com">Post comment</div>\
         <div class="bt-cancel-com">Cancel</div>\
       </div>\
       <div class="clear"></div>\
     </div>'
   );
 });
<!----- HTML ----->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<span id="comment1">Comment</span>
<span id="comment2">Comment</span>
<span id="comment3">Comment</span>

Comments