Question

我正在尝试将JSON元素传递给函数，但它无法正常工作。有什么想法吗？这是我的代码：

$(document).ready(function () {
    $.ajax({
        type: "GET",
        url: "/smallbusiness/_assets/js/events.json",
        success: formatJson,
        error: function() {
            alert("Data file failed to load");
        }
    });
});

function formatJson (data) {

        var json = data.events.event;
        var containerList = $('#event-list');
        var containerDescrip = $('#event-descrip');
        var template = '';
        var defaultDescrip = '';

        //Format and display event list 
        $.each(json, function(i, item) {
            template += '<p><a href="javascript:void(0)" onClick="formatDescrip(' + i + ',' + json[i].title + ')">' + this.title + '</a></p>';
        });
        containerList.html(template);
}

function formatDescrip(j, jsonData) {
    alert(j);
    alert(jsonData);
}

我正在尝试将i和json[i].title都传递给formatDescrip()，但它会抛出此错误：

Error: missing ) after argument list
Source File: http://localhost/smallbusiness/webinars.html#
Line: 1, Column: 20
Source Code:
formatDescrip(3,How to Leverage Email Marketing)

我做错了什么？如果我想传递整个json对象怎么办？我该怎么办呢？看起来它应该是直截了当的，但我一直都会遇到错误。

Answer 1

你忘记了标题周围的引号。

    $.each(json, function(i, item) {
        template += '<p><a href="javascript:void(0)" onClick="formatDescrip(' + i + ',\"' + json[i].title + '\")">' + this.title + '</a></p>';
    });

但是，为什么不使用jQuery的“.delegate（）”而不是那样设置处理程序呢？

    $.each(json, function(i, item) {
        template += '<p><a class="dynamic" data-index="' + i + '" href="#">' + this.title + '</a></p>';
    });
    containerList.delegate("a.dynamic", "click", function(ev) {
      formatDescrip($(this).data('index'), $(this).text());
    });

或类似的东西;如果列表被多次扩展，那么“.delegate（）”调用可能应该在处理程序之外完成一次。

编辑 - 如果“formatDescrip（）”函数需要访问原始“事件”对象（无论您使用哪些内容来制作<a>标记列表），您可以将其传递给“formatDescrip（）”而不是索引，然后根据需要修改其他函数：

    containerList.delegate("a.dynamic", "click", function(ev) {
      formatDescrip( json[$(this).data('index')] );
    });

    // ...

function formatDescrip(eventObj) {
    alert(eventObj.title);
    //
    // ... more code here ...
    //
}

Answer 2

我已经在评论中解释了什么是问题（缺少引号）。

但最好不要以这种方式创建HTML，而是创建“真实”元素。使用jQuery更容易：

var $div = $('<div />');
//Format and display event list 
$.each(json, function(i, item) {
    var title = json[i].title;
    $('<p />').append(
        $("<a />", {
            href: "javascript:void(0)", // you should use a proper URL here
            text: title,
            click: function(e){
                e.preventDefault(); 
                formatDescrip(i, title);
            }
        })
    ).appendTo($div);
});
containerList.empty().append($div.children());

更新：或者甚至更好，使用.delegate()作为@Pointy suggests。

Answer 3

我想也许你有一个简单的引用作为标题的一部分，这是破坏你的代码。尝试在字符串中搜索这些字符或使用双引号而不是简单字符。

在jQuery中将对象作为函数参数传递

3 个答案: