Add custom trigger to dynamically created element

Question

I need to a a trigger to a dynamically created element then use event deligation to pick up the event and remove the dynamic element.

<div class="row">
    <div class="col-md-8 clickable"></div>
    <div class="col-md-4 display-clicks">
        <ul class="clicks">
        </ul>
    </div>
</div>

so lets say we have the above html within the display-clicks div the ul is appended with a list of co-ordinates clicked in the clickable div and next to each a remove button. the clickable div is populated with dynamically created spans all of which have a unique Id which is just the concatenated co-ordinates of the click. I can remove the appended li containing the co-ordinates and button using:

 $('.display-clicks').on('click','button',function(){
        // and this gets me the id of the dynamic span to be removed
        // from the clickable div
        var id = $(this).data('span-id');

        // this wont work
        $(id+'_span').remove();

        // neither will this
        $(id+'_span').trigger('myEvent');

        $(this).parent().remove();
        console.log(id);
  })

myEvent looks like this

   $('.clickable').on('myEvent', 'span', function(event){
       $(this).remove();
    })

Any ideas?

its just a span with an id like <span id="439.124_span">x</span> — futureweb
– futureweb, Commented Apr 13, 2016 at 13:42

Velimir Tchatchevsky · Accepted Answer · 2016-04-13 13:38:21Z

1

$(this).parent().remove(); would remove the this element too, since you are removing it's parent. Therefore id cannot be defined and you can't select your span. Put that line at the end of the block. Also your id's cannot start with a number - http://www.w3schools.com/tags/att_global_id.asp

answered Apr 13, 2016 at 13:38

Velimir Tchatchevsky

2,8401 gold badge18 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

futureweb Over a year ago

I can see it looks that way I actually cast id to a variable before removing the parent and i can console.log it after trying to remove the span and li I will edit the question code.

Velimir Tchatchevsky Over a year ago

also don't use digits in the start of the id value, you can use them after the first character - which should be a letter

futureweb Over a year ago

very strange my code seems to work fine live but not on my dev machine sorry

Diego Polido Santana · Accepted Answer · 2016-04-13 13:55:13Z

0

Try this:

   $('.clickable').on('myEvent', 'span', function(event){
       $(this).remove();
    })

and your function is like this:

  $('.display-clicks').on('click','ul',function(){
        $(this).parent().remove();
        // and this gets me the id of the dynamic span to be removed
        // from the clickable div
        var id = $(this).data('span-id');

        // this works now
        $("#" + id+'_span_just_remove').remove();

        // this works too
        $("#" + id +'_span_trigger').trigger('myEvent');
  })

Plunker: https://plnkr.co/edit/ocZv95B3wBifX5zK7ob4?p=preview

answered Apr 13, 2016 at 13:55

Diego Polido Santana

1,43511 silver badges19 bronze badges

Collectives™ on Stack Overflow

Add custom trigger to dynamically created element

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related