如何让 javascript 在页面上使用 json 加载的 html 上工作？答案

【问题标题】：How can I get javascript to work on html that I load with json on the page?如何让 javascript 在页面上使用 json 加载的 html 上工作？
【发布时间】：2011-11-17 17:02:45
【问题描述】：

在一个特定的页面上，我使用 json 来加载一些 html 代码，这些代码显示有关用户单击某物时提交的内容的信息。

在这种情况下，用户正在挑选他最喜欢的棒球运动员，并且 json 会返回一些 html 代码，这些代码会格式化并显示球员的姓名。

在页面上加载该 html 时，实时点击 javascript 功能不再适用于加载的 html。有什么方法可以刷新 javascript 以使其适用于它？

【问题讨论】：

标签： javascript jquery html ruby-on-rails json

【解决方案1】：

当用户点击他最喜欢的棒球运动员时，你向服务器发出请求，服务器返回一个包含球员信息的 json 对象，对吧？如果服务器返回一个包含 html 标签而不是 json 对象的字符串，我认为您的做法不正确。

服务器应响应的 JSON 对象应如下所示。

{Name : 'Kobe Bryant', JerseyNumber : 0, Salary : 500}

收到此对象后，您将对其进行解析并将其内容放入页面上的一个元素中。使用 HTML 代码响应不是一个好的做法，您应该创建一个模板来存储您的运动员数据。

如果您在此问题中提供一些代码，我将非常乐意帮助您解决问题。

【讨论】：

它返回一个json对象，其中一个变量是一串html。所以它看起来像 msg.html == "
Name"
我很欣赏这个建议，但我们需要在服务器端创建 html 以提高性能。这样，javascript 就不必在页面加载时解析数据并创建 html。

【解决方案2】：

你在使用 jQuery 吗？他们有一个内置的方法来处理这个问题。

$('#myElement').live('click', function() {
    /* Your Code Goes Here */
});

在 jQuery 1.7 中，同样的事情可以写成：

$('#myElement').on('click', function() {
    /* Your Code Goes Here */
});

【讨论】：

是的，我正在使用 jQuery，我有这个功能。当 json 请求返回我显示的 html 时，单击不再适用于返回的 html。我返回的 html 元素与我单击的原始 html 元素具有相同的类。

【解决方案3】：

经过大量研究和几个人交谈，我发现我需要在json回调之后重新绑定事件。

这是一个很大的帮助： http://jetlogs.org/2009/01/29/re-binding-jquery-events-on-ajax-callbacks/

当使用 jQuery 的 .click() 方法并渲染新的 html 时，原来附加的 javascript 需要重新附加。

使用带有“click”选项的 .live() 方法可以更轻松地解决这个问题。 .live() 方法自动重新绑定新代码。

【讨论】：

Name"