Question

我正在使用jquery来引入JSON并遍历结果以创建项集合。即，具有一些数据属性的锚点。然后，我正在观看这些项目，以便点击时我可以提取相关的数据属性并...使用该数据执行操作。当我用数据硬编码锚点时，一切都很好。当我通过JSON动态创建它时，我什么都没得到，页面刷新。

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;
    });
});

我道歉，因为那里有代码，我没有解释，因为那是我用锚点数据做的“东西”。

Answer 1

你可以这样做

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;
    });
});

Javascript动态创建元素的操作顺序

1 个答案: