Question

我尝试从JSON数组动态创建列表图像，该数组将在单击其中一个图像时调用JavaScript函数。该函数将向服务器发送请求，标记该图像。我目前有以下内容：

        var GLOBAL_POST_ID_LIST = [];
    function createList(jsonData) {
        for (var i = 0; i < jsonData.posts.length; i++) {
            var curPostId = jsonData.posts[i].post_id;

            // Check if the current post is in the list
            if ($.inArray(curPostId, window.GLOBAL_POST_ID_LIST) < 0) {
                jQuery('<img/>', {
                    id: curPostId,
                    src: jsonData.posts[i].image_url,
                    selected: false,
                    onclick: onPostClick(curPostId)
                }).appendTo('#postDiv');
                // At the current post to the list
                window.GLOBAL_POST_ID_LIST.push(curPostId);
            }
        }
    }

但是，在初始化对象时立即调用onclick函数，而不是在单击对象时调用。当初始化任何给定的帖子时，如何使用正确的post_id调用onPostClick？

Answer 1

你需要将它包装在一个函数中：

onclick: function() { onPostClick(curPostId); }

此外，您需要将curPostId保存在闭包中，否则您将获得所有元素的相同值（请参阅Javascript infamous Loop issue?）。所以它应该是：

onclick: (function(curPostId) {
            return function () { onPostClick(curPostId); };
         })(curPostId)

但是，为什么你需要首先将ID参数传递给onPostClick？ jQuery自动将this绑定到事件处理程序中的事件目标，因此onPostClick应该能够使用this.id来获取ID。如果你修复了这个功能，你可以写：

onclick: onPostClick

您还可以通过为图片提供课程并使用事件委派来避免此问题。请参阅Event binding on dynamically created elements?。

Answer 2

在匿名函数中调用函数：

  // Check if the current post is in the list
            if ($.inArray(curPostId, window.GLOBAL_POST_ID_LIST) < 0) {
                jQuery('<img/>', {
                    id: curPostId,
                    src: jsonData.posts[i].image_url,
                    selected: false,
                    onclick: function(){
                        onPostClick(curPostId);
                    }
                }).appendTo('#postDiv');
                // At the current post to the list
                window.GLOBAL_POST_ID_LIST.push(curPostId);
            }

这将阻止为onclick属性分配调用onPostClick函数的结果。

由于您在循环中绑定此事件处理程序，因此您需要创建一个闭包以避免卡在循环的最后一个值上。

           jQuery('<img/>', {
                id: curPostId,
                src: jsonData.posts[i].image_url,
                selected: false,
                onclick: (function(id){
                    return function(){
                       onPostClick(id);
                    };
                })(curPostId)
            }).appendTo('#postDiv');

Answer 3

您可以使用：

$("#yourId").click(function(){...});

如何使用JQuery设置onclick监听器

3 个答案: