如何在jquery的.html()中执行jquery/javascript代码

Question

在jQuery.html()内部，我想要执行以下脚本。

$("#row1").html("<td id="cellId"><script>if (selectedStr) {var elem = $(\"#cellId\");       
$(elem).bind(\"onRefresh\", function() {loadColor(selectedStr); storeStr(selectedStr);});$(elem).trigger(\"onRefresh\");) }</script><td>")

需求:

我有一个testPage.jsp，其中包含带单元格的表格。当选择特定单元格并点击“提交”按钮时，将弹出一个弹出窗口。在弹出页面中，更改了一些数据，并通过ajax进行处理。结果ajax响应必须动态设置为父行。ajax响应构建整个要设置的内容。这就是我失败的地方。 Ajax响应将是这样的：

<td>.....</td> <td>.....</td> <td>content<script>...</script></td> <td>.....</td> <td>content<script>...</script></td> ...

此外，“selectedStr”是testPage.jsp中的javascript全局变量。

问题: 1. “selectedStr未定义”是浏览器错误消息。我无法引用全局变量。 2. 元素绑定未发生。

我尝试使用jQuery.getScript（），jQuery.globalEval，jQuery.eval。 我无法理解JQuery的{{html}}。

谢谢！

- chinni

---

我认为你应该将句子中的if去掉，执行所有需要的程序，最后用所需的HTML代码填充#row1。 - Toni Michel Caubet

你的HTML中的引号转义不正确...."cellId" - Dave L.

“cellId”逃脱是问题中的拼写错误。 - chinni

Answer 1

不要把所有内容都写进脚本中，先在内存中构建元素，在将其添加到DOM之前为其添加事件处理程序。

$td = $("<td></td>").attr("id", "cellId")
    .bind("onRefresh", function() {
        if (selectedStr) {
            loadColor(selectedStr);
            storeStr(selectedStr);
        }
    })
    .trigger("onRefresh");

$("#row1").html($td);

此外，添加具有相同Id的多个td元素时要小心。

- Rory McCrossan

---

我正在构建元素数据作为ajax响应的一部分。之后，我将其添加到DOM中。因此，您在.html()中看到的整个内容都是动态构建的。 - chinni

没问题，只需将上述代码添加到您的成功处理程序中即可。 - Rory McCrossan

Answer 2

你应该以这种方式构建HTML：

var newRow = $('<tr/>').bind('onRefresh',function(){

{code}

});

$("#row1").append(newRow);

或者

$("#row1").html(newRow);

但我真的不理解它在您的页面上应该如何运作。

- kaz

---

实际上，我正在将事件绑定到<td>。因此，对于每个<td>，我都需要绑定事件。根据“selectedStr”的值，我将决定是否绑定事件。 - chinni

Answer 3

如果您想根据JavaScript输出填充HTML，则应将函数用作参数传递给jQuery.html()。请参见以下内容。

$("#row1").html(function (index, oldHTML){
var elem = $(this);
//This is where you could run your if and other functions
//formulate the new html 
//then just return it to set the html
return newHTML;
});

此外，如需更多示例，请阅读 jQuery.html() API。

- kwelch

Answer 4

我需要做的就是在动态内容中定义一个隐藏的div：

<div id="afterAjax" style="display:hidden">
if (selectedStr) {
  var elem = ... etc...
</div>

请注意，我没有<script>标签。

然后，在ajax之后（或在将其插入HTML之后）：

eval($('#afterAjax').html());

更新

这里有一个演示它工作的fiddle - 不知道为什么有人会打分低。:( 当我需要做这件事时，我正好使用这个。

fiddle中的代码只是：

$('body').append('<div id="test">test</div><div id="afterAjax" style="display:none">alert("works");</div>');

eval($("#afterAjax").html());

http://jsfiddle.net/mhart/y22r5/3/

- Matt H

---

谢谢您的回复。但是一旦将ajax响应内容添加到DOM中，eval()就无法工作。应该在<script>标签内使用eval()吗？$("#row1").html(ajaxRespContent); eval($("#afterAjax").html()); 这样做不起作用。 - chinni

刚在fiddle里试了一下，运行良好。是的，在加载响应后，eval()必须在您的脚本中。http://jsfiddle.net/mhart/y22r5/3/ - Matt H