同位素；javascript-元素不是'；添加新的后，无法再单击_Javascript_Jquery Isotope

同位素；javascript-元素不是'；添加新的后，无法再单击

javascript

同位素；javascript-元素不是'；添加新的后，无法再单击,javascript,jquery-isotope,Javascript,Jquery Isotope,我试图创建一个从json加载的图像表（不是真正的json，更像是javascript数组），每次json发生变化时（当我用一些脚本将新图像附加到json文件时，我希望我的图像表也能上传这是json格式： [{ "image": "images/set_1_UTC+03.jpg", "weight": 101 }, { "image": "images/set_1_UTC+03.jpg", "weight": 102 }, { "image": "imag

我试图创建一个从json加载的图像表（不是真正的json，更像是javascript数组），每次json发生变化时（当我用一些脚本将新图像附加到json文件时，我希望我的图像表也能上传

这是json格式：

[{
    "image": "images/set_1_UTC+03.jpg",
    "weight": 101
}, {
    "image": "images/set_1_UTC+03.jpg",
    "weight": 102
}, {
    "image": "images/set_1_UTC+03.jpg",
    "weight": 103
}, {
    "image": "images/set_1_UTC+03.jpg",
    "weight": 104
}]

为此，我使用同位素。我成功地实现了上面提到的一切，唯一的问题是，我想让图像可点击，每当我点击其中一个图像时，它的大小会变大，当我再次点击它时，它会变小。下面是代码：

<script>
    var previous = 0;
    var current = 0;
    loadJSON(function(response) {
        // Parse JSON string into object
        current = JSON.parse(response);
    });

    function loadJSON(callback) {
        var xobj = new XMLHttpRequest();
        xobj.overrideMimeType("application/json");
        xobj.open('GET', 'data.json', true); // Replace 'my_data' with the path to your file
        xobj.onreadystatechange = function() {
            if (xobj.readyState == 4 && xobj.status == "200") {
                // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
                callback(xobj.responseText);
            }
        };
        xobj.send(null);
    }

    let lengthOfprevious = previous.length;

    setInterval(function() {
        loadJSON(function(response) {
            // Parse JSON string into object
            current = JSON.parse(response);
        });
        previous = current;
        if (lengthOfprevious != current.length) {
            UpdateBody(lengthOfprevious);
        }
        lengthOfprevious = previous.length;
    }, 5000);

    function UpdateBody(startIndex) {
        var newElements = "";
        for (let i = startIndex; i < previous.length; i++) {
            $(document).ready(function() {
                newElements = "";
                newElements +=
                    '<div class="photo element-item">' +
                    '<a href="' + previous[i].image + '"><img class="small-image" src="' + previous[i].image + '"/></a>' +
                    '<a class="weight">' + previous[i].weight + '</a></div>';
                var $newElems = $(newElements);

                $('#container').append($newElems).imagesLoaded(function() {

                    $('#container').isotope('insert', $newElems);
                });
            });
        }

        // ============//
        $(function() {
            var $container = $('#container'),
                $photos = $container.find('.photo'),
                $loadingIndicator = $('<div class="loading"><span><img src="http://i.imgur.com/IE7iw.gif" /></span></div>');
            // trigger Isotope after images have loaded
            $container.imagesLoaded(function() {
                $container.isotope({
                    itemSelector: '.photo',
                    masonry: {
                        columnWidth: 200
                    }
                });
            });
            // shows the large version of the image
            // shows small version of previously large image
            function enlargeImage($photo) {
                $photos.filter('.large').removeClass('large');
                $photo.addClass('large');
                $container.isotope('reLayout');
            }

            $photos.find('a').click(function() {
                var $this = $(this),
                    $photo = $this.parents('.photo');

                if ($photo.hasClass('large')) {
                    // already large, just remove
                    $photo.removeClass('large');
                    $container.isotope('reLayout');
                } else {
                    if ($photo.hasClass('has-big-image')) {
                        enlargeImage($photo);
                    } else {
                        // add a loading indicator
                        $this.append($loadingIndicator);

                        // create big image
                        var $bigImage = $('<img>', {
                            src: this.href
                        });

                        // give it a wrapper and appended it to element
                        $('<div>', {
                                'class': 'big-image'
                            })
                            .append($bigImage)
                            .appendTo($this)
                            .imagesLoaded(function() {
                                $loadingIndicator.remove()
                                enlargeImage($photo);
                            });
                        // add a class, so we'll know not to do this next time
                        $photo.addClass('has-big-image');
                    }
                }
                return false;
            });
        });
    }
</script>


var-previous=0；
无功电流=0；
loadJSON（函数（响应）{
//将JSON字符串解析为对象
current=JSON.parse（响应）；
});
函数loadJSON（回调）{
var xobj=新的XMLHttpRequest（）；
重写emimetype（“application/json”）；
xobj.open（'GET'，'data.json'，true）；//用文件路径替换'my_data'
xobj.onreadystatechange=函数（）{
if（xobj.readyState==4&&xobj.status==200）{
//要求使用匿名回调as.open将不会返回值，而只是在异步模式下返回未定义的值
回调（xobj.responseText）；
}
};
xobj.send（空）；
}
让lengthOfprevious=previous.length；
setInterval（函数（）{
loadJSON（函数（响应）{
//将JSON字符串解析为对象
current=JSON.parse（响应）；
});
先前=当前；
如果（lengthOfprevious！=当前长度）{
UpdateBody（lengthOfprevious）；
}
lengthOfprevious=先前的长度；
}, 5000);
函数更新库（startIndex）{
var newElements=“”；
for（设i=startIndex；i
您需要手动复制和粘贴数据文件中的一些行，以使演示正常工作，因为它会搜索数据文件的先前状态和当前状态之间的差异。问题是，它一开始是可单击的，然后就不再是了。
解决了$photos.find（'a'）中的问题。单击（
-将单击绑定到现有项目，这样新的its不会触发单击。您应该创建事件委派&
$（'.items\u wrap\u class'）。在（'click'，'a'，function（）上{
/*所有现有项目和新项目单击将触发此*/
})

UPD
在您的情况下，请委托#容器。照片a
单击处理
替换
$photos.find（'a'）。单击（function（）{…}）

与
$（“#容器”）。在（'click'，'.photo a'，function（）{…}）
我在您的代码中发现了一些需要修改的内容：
为什么$（document.ready
使用了一次以上
无需使用$（function（）
因为我看到photo类是在运行时动态生成的，容器类已经在DOM中，所以我修改了click事件
$container.on('click', '.photo a', function() {


编辑请注意代码未经测试；我刚刚对其进行了代码更正
最终更新代码如下：
var previous = 0;
var current = 0;
loadJSON(function(response) {
    // Parse JSON string into object
    current = JSON.parse(response);
});

function loadJSON(callback) {
    var xobj = new XMLHttpRequest();
    xobj.overrideMimeType("application/json");
    xobj.open('GET', 'data.json', true); // Replace 'my_data' with the path to your file
    xobj.onreadystatechange = function() {
        if (xobj.readyState == 4 && xobj.status == "200") {
            // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
            callback(xobj.responseText);
        }
    };
    xobj.send(null);
}
let lengthOfprevious = previous.length;

setInterval(function() {
    loadJSON(function(response) {
        // Parse JSON string into object
        current = JSON.parse(response);
    });
    previous = current;
    if (lengthOfprevious != current.length) {
        UpdateBody(lengthOfprevious);
    }
    lengthOfprevious = previous.length;
}, 5000);

function UpdateBody(startIndex) {
    var newElements = "",
        $container = $('#container'),
        $photos = $container.find('.photo'),
        $loadingIndicator = $('<div class="loading"><span><img src="http://i.imgur.com/IE7iw.gif" /></span></div>');

    $(document).ready(function() {
        for (let i = startIndex; i < previous.length; i++) {
            newElements = "";
            newElements +=
                '<div class="photo element-item">' +
                '<a href="' + previous[i].image + '"><img class="small-image" src="' + previous[i].image + '"/></a>' +
                '<a class="weight">' + previous[i].weight + '</a></div>';

            var $newElems = $(newElements);

            $container.append($newElems).imagesLoaded(function() {
                $container.isotope('insert', $newElems);
            });
        }
        $container.imagesLoaded(function() {
            $container.isotope({
                itemSelector: '.photo',
                masonry: {
                    columnWidth: 200
                }
            });
        });
        // shows the large version of the image
        // shows small version of previously large image
        function enlargeImage($photo) {
            $photos.filter('.large').removeClass('large');
            $photo.addClass('large');
            $container.isotope('reLayout');
        }

        $container.on('click', '.photo a', function() {
            var $this = $(this),
                $photo = $this.parents('.photo');

            if ($photo.hasClass('large')) {
                // already large, just remove
                $photo.removeClass('large');
                $container.isotope('reLayout');
            } else {
                if ($photo.hasClass('has-big-image')) {
                    enlargeImage($photo);
                } else {
                    // add a loading indicator
                    $this.append($loadingIndicator);

                    // create big image
                    var $bigImage = $('<img>', {
                        src: this.href
                    });

                    // give it a wrapper and appended it to element
                    $('<div>', {
                            'class': 'big-image'
                        })
                        .append($bigImage)
                        .appendTo($this)
                        .imagesLoaded(function() {
                            $loadingIndicator.remove()
                            enlargeImage($photo);
                        });

                    // add a class, so we'll know not to do this next time
                    $photo.addClass('has-big-image');

                }
            }

            return false;
        });

    });
}

var-previous=0；
无功电流=0；
loadJSON（函数（响应）{
//将JSON字符串解析为对象
current=JSON.parse（响应）；
});
函数loadJSON（回调）{
var xobj=新的XMLHttpRequest（）；
重写emimetype（“application/json”）；
xobj.open（'GET'，'data.json'，true）；//用文件路径替换'my_data'
xobj.onreadystatechange=函数（）{
if（xobj.readyState==4&&xobj.status==200）{
//要求使用匿名回调as.open将不会返回值，而只是在异步模式下返回未定义的值
回调（xobj.responseText）；
}
};
xobj.send（空）；
}
让lengthOfprevious=previous.length；
setInterval（函数（）{
loadJSON（函数（响应）{
//将JSON字符串解析为对象
current=JSON.parse（响应）；
});
先前=当前；
如果（lengthOfprevious！=当前长度）{
UpdateBody（lengthOfprevious）；
}
lengthOfprevious=先前的长度；
}, 5000);
函数更新库（startIndex）{
var newElements=“”，
$container=$（“#container”），
$photos=$container.find（'.photo'），
$loadingIndicator=$（''）；
$（文档）.ready（函数（）{
for（设i=startIndex；i<script>
    var previous = [];
    var current = [];

    function loadJSON(callback) {
        var xobj = new XMLHttpRequest();
        xobj.overrideMimeType("application/json");
        xobj.open('GET', 'data.json', true); // Replace 'my_data' with the path to your file
        xobj.onreadystatechange = function() {
            if (xobj.readyState == 4 && xobj.status == "200") {
                // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
                callback(xobj.responseText);
            }
        };
        xobj.send(null);
    }

    function start(){
        loadJSON(function(response) {
            previous = current;
            current = JSON.parse(response);
            if (previous.length != current.length) {
                UpdateBody(current);
            }
        });
    }

    function UpdateBody(data) {
        var newElements = "";
        for (var i in data) {            
            newElements +=
                '<div class="photo element-item">' +
                '<a href="' + data[i].image + '"><img class="small-image" src="' + data[i].image + '"/></a>' +
                '<br/>' +
                '<a class="weight">' + data[i].weight + '</a>' +
                '</div>';
        }

        if(newElements!=""){
            var $newElems = $(newElements);

            $('#container').append($newElems).imagesLoaded(function() {
                $('#container').isotope('insert', $newElems);
            });
        }
    }

    $(document).ready(function(){
        start();

        setInterval(start, 5000);

        var $container = $('#container'),
                $photos = $container.find('.photo'),
                $loadingIndicator = $('<div class="loading"><span><img src="http://i.imgur.com/IE7iw.gif" /></span></div>');
        // trigger Isotope after images have loaded
        $container.imagesLoaded(function() {
            $container.isotope({
                itemSelector: '.photo',
                masonry: {
                    columnWidth: 200
                }
            });
        });
        // shows the large version of the image
        // shows small version of previously large image
        function enlargeImage($photo) {
            $container.find('.photo.large').removeClass('large');
            $photo.addClass('large');
            $container.isotope('layout');
        }

        $(document).on('click','#container .photo a',function() {
            var $this = $(this),
                $photo = $this.parent('.photo');

            if ($photo.hasClass('large')) {
                // already large, just remove
                $photo.removeClass('large');
                $container.isotope('layout');
            } else {
                if ($photo.hasClass('has-big-image')) {
                    enlargeImage($photo);
                } else {
                    // add a loading indicator
                    $this.append($loadingIndicator);

                    // create big image
                    var $bigImage = $('<img>', {
                        src: this.href
                    });

                    // give it a wrapper and appended it to element
                    $('<div>', {
                            'class': 'big-image'
                        })
                        .append($bigImage)
                        .appendTo($this)
                        .imagesLoaded(function() {
                            $loadingIndicator.remove()
                            enlargeImage($photo);
                        });
                    // add a class, so we'll know not to do this next time
                    $photo.addClass('has-big-image');
                }
            }
            return false;
        });
    });
</script>