使用jQuery触发动态自定义事件

时间:2014-09-02 08:38:15

标签: javascript jquery javascript-events

我正在Symfony2项目中开发Json / AJAX实现。一切正常(模态,重定向等),但我的"火灾事件"实施不是。

这是我的代码:

$(document).trigger(data.content, [data.data]);

data.content包含事件的名称,在本例中为" lesson_editor.added_step"并且data.data包含HTML字符串。

我在jQuery库中收到错误Uncaught TypeError: undefined is not a function。使用Chrome调试器时,上面的触发器就是导致它的行。

如果我将data.content替换为字符串"my.test"则可行。

谢谢你的帮助。

完整的JSON字符串:

{"type":"event","content":"lesson_editor_added_step","data":"\n    <div class=\"panel\">\n        <div class=\"panel-heading\">\n            <span class=\"panel-title\">\n                <a data-toggle=\"collapse\" data-parent=\"#steps\" href=\"#step25\">\n                    asdfasdfasdf\n                <\/a>\n            <\/span>\n            <div class=\"pull-right\">\n                <a href=\"#\" class=\"btn btn-xs btn-success\" data-toggle=\"tooltip\" title=\"Add action\">\n                    <i class=\"fa fa-plus\"><\/i>\n                <\/a>\n                <a href=\"#\" class=\"btn btn-xs btn-warning\" data-toggle=\"tooltip\" title=\"Edit step\">\n                    <i class=\"fa fa-edit\"><\/i>\n                <\/a>\n                <a href=\"#\" class=\"btn btn-xs btn-danger\" data-toggle=\"tooltip\" title=\"Delete step\">\n                    <i class=\"fa fa-times\"><\/i>\n                <\/a>\n            <\/div>\n        <\/div>\n        <div id=\"step25\" class=\"panel-collapse collapse in\">\n            <div class=\"panel-body\" id=\"actions25\">\n                            <\/div>\n        <\/div>\n    <\/div>\n","flashBag":{"success":["Step added"]}}

AJAX致电

 the URL
 $.ajax({
     url: url,
     type: type,
     data: data,
     beforeSend: this.options.beforeSendCallback
 })
.done($.proxy(function(data) {
    if (data.type === undefined) {
        alert("Ajax data invalid");
        return false;
    }
    // Switch data type
    switch (data.type) {
        case 'modal':
            // Create modal
            $(document).bootstrapModal("createModal", data.content);
            break;
        case 'redirect':
            // Redirect to page
            window.location.replace(data.content);
            break;
        case 'event':
            // Fire a custom event
            $(document).trigger(data.content, [data.data]);
            break;
    }
    // Check if flashbag exists
    if (data.flashBag) {
        $.each(data.flashBag, function(type, messages) {
            $.each(messages, function(index, message) {
                new PNotify({
                    type: type,
                    text: message
                });
            });
        });
    }
    // Fire event
    $(document).trigger('ajax_done', [data.data]);
}), this)
.fail(this.options.failCallback);

1 个答案:

答案 0 :(得分:1)

最好使用以下内容触发自定义事件:

$(document).trigger(data.content, data.data);

并使用.on事件处理程序捕获它:

$(document).on(data.content, function(event, args...) {
   // do something beneficial for your career here
});