在 Ajax 响应中返回 javascript 标记的替代方法答案

【问题标题】：Alternative to returning javascript tag in Ajax response在 Ajax 响应中返回 javascript 标记的替代方法
【发布时间】：2013-07-07 07:52:45
【问题描述】：

我的代码中的一个 ajax 请求返回一些 html，其中某些元素需要自定义事件处理，如下所示：

<div>
 <!--some html-->
 <button id='specialbutton'></button>
</div>
<script type='text/javascript'>
 $("#specialbutton").click(function(e){
   //some special handing of html above
});
</script>

我了解从 ajax 请求返回的 javascript 是 not executed automatically，并且使用 eval() 执行 return js 被认为是不安全的并且通常是不好的做法。但是我需要在这里执行的代码只是返回的 html sn-p 的本地代码（在 Django 模板中），包括在发送 ajax 请求的样板 html 中似乎违反了分隔规则。我应该向元素添加像 'data-role="specialbutton"' 这样的属性，并全局使用 jQuery.live() 来附加处理程序，还是什么？

这里的最佳做法是什么？有什么好的建议吗？

【问题讨论】：

使用 api.jquery.com/on 来监听您将 ajax 内容加载到的容器上的事件
这是一个艰难的情况，最一致的方法是在成功回调中绑定事件。这当然打破了分离。我建议在外部脚本中添加额外的 js 并在成功时请求它。
也可以将JS放到一个文件中，然后在响应中也返回一个<script src="..."></script>标签，或者修改响应如{content:'html',scripts:['script1.js']}并使用$.getScript()。

标签： javascript jquery ajax

【解决方案1】：

您可以使用一些 pub/subbing，以便仅在有成功的 ajax 请求时触发事件，如下所示：

$.ajax({
    success: function( data ) {
      $(document).trigger('some/special/event');
    }
})

$(document).on( 'some/special/event', function() {
    $("#specialbutton").on( 'click', function(e){
         //some special handing of html above
    });
});

这将允许您保持代码分离，并且仅当 HTML 在页面上时才添加事件侦听器。
这是一篇关于使用自定义 jQuery 事件的精彩文章的链接：http://www.sitepoint.com/jquery-custom-events/

【讨论】：