Javascript Order of Operations with Dynamically Created Elements

Question

I am using jquery to pull in JSON and loop through the results to create a collection of items. Namely, Anchors with a few data attributes. I then am watching those items so that on click I can pull the relevant data attributes and... do things with that data. When I hard code in the anchors with the data, everything works great. When I create them dynamically through the JSON I get nothing, and the page refreshes.

jQuery( document ).ready(function() {

    $.getJSON("http://glacier.creativefilterdev.com/wp-json/wp/v2/chocolate?categories=42&per_page=100&order=asc", function(result) {
    $.each(result, function(i, item) {

        if(item.better_featured_image == null){

        } else {
            $(".white").append("<a class=\"choc-option\" href=\"\" data-text=\"" + item.title.rendered + ", \" data-img=\"" + item.better_featured_image.media_details.sizes.thumbnail.source_url + "\"><img class=\"chocolate\" src=\"" + item.better_featured_image.media_details.sizes.thumbnail.source_url + "\"><br>" + item.title.rendered + "</a>");
        }
    });
    });

    jQuery("a[data-text]").click(function(){ 
       if(howMany < countVar) {
            howMany += 1;
            var imgurl = jQuery(".single").val();
            var structure = jQuery('<div class="single" data-text="'+ jQuery(this).attr('data-text') +'"><img src="'+ jQuery(this).attr('data-img') +'"><a class="delete">-</a></div>');
            jQuery('.buildbox').append(structure);
            jQuery("#alert").css('display', 'none');
       } else { 
            jQuery("#alert").css('display', 'block');
       }

      return false;
    });
});

I apologize as there is code in there that I haven't explained as that is the "stuff" I'm doing with the data from the anchors.

Answer 1

You can do it like this

jQuery( document ).ready(function() {

    $.getJSON("http://glacier.creativefilterdev.com/wp-json/wp/v2/chocolate?categories=42&per_page=100&order=asc", function(result) {
    $.each(result, function(i, item) {

        if(item.better_featured_image == null){

        } else {
            $(".white").append("<a class=\"choc-option\" href='' data-text=\"" + item.title.rendered + ", \" data-img=\"" + item.better_featured_image.media_details.sizes.thumbnail.source_url + "\"><img class=\"chocolate\" src=\"" + item.better_featured_image.media_details.sizes.thumbnail.source_url + "\"><br>" + item.title.rendered + "</a>");
        }
    });
    });

    $('body').on('click', 'a[data-text]', function(e) {
        e.preventDefault();
        alert('test');
       if(howMany < countVar) {
            howMany += 1;
            var imgurl = jQuery(".single").val();
            var structure = jQuery('<div class="single" data-text="'+ jQuery(this).attr('data-text') +'"><img src="'+ jQuery(this).attr('data-img') +'"><a class="delete">-</a></div>');
            jQuery('.buildbox').append(structure);
            jQuery("#alert").css('display', 'none');
       } else { 
            jQuery("#alert").css('display', 'block');
       }

      return false;
    });
});