Append in jQuery

Question

I have this snippet in jQuery. I append an input text when a user clicks on an add sign that has an id 'clickEventOnPlus'. Within this appened code, there is a minus sign (defined in within ) that has another class clickEventOnMinus.

$('#clickEventOnPlus').click(function(){
   var addDestination2 = '<input type="text" <span><i style="font-size:18px" class="fa clickEventOnMinus">&#xf068;</i></span> <br> <br>'
   $(".addDestination").append(addDestination2);
});

How do I add an event listener on clickEventOnMinus? Because when I try the following code, it doesn't work. Thanks!

$('.clickEventOnMinus').click(function(){
     alert("W");
});

It should be `$(document).on("click",".clickEventOnMinus",function() {})` — Carsten Løvbo Andersen, Oct 26 '17 at 06:07
Everyone else seems to have missed the fact you never close the `input` which could cause issues later if you plan to make use of it. `` Example: ` — NewToJS, Oct 26 '17 at 06:19

score 2 · Answer 1 · edited Oct 26 '17 at 06:12

2

we can use delegated events to bind the click event to dynamically created elements and also to avoid the need to frequently attach and remove event handlers.

$(document).on('click', '.clickEventOnMinus', function() {
 alert("W");
});

edited Oct 26 '17 at 06:12

rrk

15,677
4
29
45

answered Oct 26 '17 at 06:09

4b0

21,981
30
95
142

no need to answer dup questions – guradio Oct 26 '17 at 06:09

score 1 · Answer 2 · edited Oct 26 '17 at 06:20

You need to put the .click after the element appended, otherwise, the selector cannot found the element

<script>
    $(document).ready(function(){
        $('#clickEventOnPlus').click(function(){
           var addDestination2 = '<input type="text" <span><i style="font-size:18px" class="fa clickEventOnMinus">&#xf068;</i></span> <br> <br>'
           $(".addDestination").append(addDestination2);

            $('.clickEventOnMinus').click(function(){
                 alert("W");
            });
        });
     });
</script>

score 0 · Answer 3 · answered Oct 26 '17 at 06:08

0

Try this

$(".addDestination").on('click', '.clickEventOnMinus', function(){
     alert("W");
});

answered Oct 26 '17 at 06:08

Sagar Jajoriya

2,377
1
9
17

no need to answer dup questions – guradio Oct 26 '17 at 06:09
using a smaller scope than `document` is better at performance. but you have to add an explanation to the answer. – nipunasudha Oct 26 '17 at 06:11

score 0 · Accepted Answer · answered Oct 26 '17 at 06:11

0

i've made a demo , be aware with the order of your code as the element is added to the DOM the event is added too

<div id="clickEventOnPlus">
hola
</div>
<div class="addDestination">

</div>
$('#clickEventOnPlus').click(function(){
   var addDestination2 = $('<input type="text" <span><i style="font-size:18px" class="fa clickEventOnMinus">&#xf068;</i></span> <br> <br>');
   $(".addDestination").append(addDestination2);
   console.log(addDestination2);
   $('.clickEventOnMinus').click(function(){
     alert("W");
});
});

answered Oct 26 '17 at 06:11

Álvaro Touzón

1,247
1
8
21

Thanks! Another quick question - How would I delete a specific appened item? If I want to use the minus sign to delete that specific input text, how would I go about that? – abidishajia Oct 26 '17 at 06:21
@abidishajia with remove() https://api.jquery.com/remove/ – Álvaro Touzón Oct 26 '17 at 06:25
I added this, but it deletes all the appended input texts fields. I want it to delete a specific one. `$('#clickEventOnPlus').click(function(){ var addDestination2 = '

' $(".addDestination").append(addDestination2); $('.clickEventOnMinus').click(function(){ $('.removeDest').remove(); }); }); ` @Álvaro Touzón – abidishajia Oct 26 '17 at 19:27

Append in jQuery

4 Answers4