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

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 传递给 formatDesrip() 但它抛出此错误：

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()”调用可能应该在处理程序之外执行一次。

编辑 - 如果“formatDesrip()”函数需要访问原始“事件”对象（无论您用来创建列表的那些东西是什么）标签），您可以将其传递给“formatDesrip()”而不是索引，然后根据需要修改其他函数：

    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 建议。

Answer 3

我认为也许您的标题中有一个简单的引用，这会破坏您的代码。尝试对字符串中的这些字符进行转义或使用双引号而不是简单的引号。