multi IDs with the same javascript code

Question

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

<span "id="comment1">Comment</span>
<span "id="comment2">Comment</span>
<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

Angel Politis · Accepted Answer · 2016-11-11T20:23:42.010

0

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>

edited Nov 11 '16 at 20:23

answered Nov 11 '16 at 20:07

Angel Politis

10,955
14
48
66

i think there is something wrong in this code – sirsanta Nov 11 '16 at 20:23
There's nothing wrong in my code @sirsanta. Stack Overflow just doesn't recognise multi-line strings – Angel Politis Nov 11 '16 at 20:30
yes this code there is no thing wrong with it . thanks please check the same question after i edit it and check if you could help – sirsanta Nov 11 '16 at 20:34
I see the code, but I don't see the problem. What's wrong with your code? – Angel Politis Nov 11 '16 at 21:33
your code is work amazing but after this come the problem its not work no effect starting from the : $(function(){ //alert(event.timeStamp); no thing work do you think i must add number to div class in the first script you edit before – sirsanta Nov 12 '16 at 16:43
I'm no sure what your problem is. Can you create a jsFiddle with your code so that I can see what's wrong? – Angel Politis Nov 12 '16 at 23:01

multi IDs with the same javascript code

1 Answers1