Передача объекта в качестве параметра функции в 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 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 (), вероятно, следует выполнить один раз, вне обработчика.

edit & mdash; если функции "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 предлагает .

Answer 3

Я думаю, что, возможно, у вас есть простая цитата в заголовке, и это нарушает ваш код.Попробуйте выделить эти символы в строке или использовать двойные кавычки вместо простых.