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

Question

我正在使用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); 

Answer 1

它的最好，如果触发自定义事件其动态有：

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

并用。对抓住它事件处理程序：

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