Javascript 在.html（）方法中使用jQuery内部图像标记

我正在尝试设置一个包含HTML表的页面。您可以单击表上的任何一行，以调出具有不同图像的模式。图像URL将作为数据ID存储在标记中，因为我必须在浏览器中执行所有这些操作，并且没有服务器可以调用

我有以下代码来设置我的模式。本身，$（this.data（'chi'）获取数据chi id，即图像url。如何在.HTML（）jQuery方法中的HTML中使用它？我试过各种各样的逃避方法，但都想不出来

$('#orderDetails').html($("<b>  Order Id selected: <img src=\'\$(this).data('chi')\' alt=\"Smiley face\">" + '</b>'));

$('#orderModal').modal('show');

$（'#orderDetails'）.html（$（$（$（订单Id已选定：“+”））；
$（'orderModal'）.modal（'show'）；

---

链接到JSFiddle-

我认为最好的方法是先将

数据chi

属性保存在变量中，然后在字符串连接中使用它，如：

var chi = $(this).data('chi');
$('#orderDetails').html($("<b>  Order Id selected: <img src='"+chi+"' alt=\"Smiley face\">" + '</b>'));

var chi=$（this.data（'chi'）；
$（'#orderDetails'）.html（$（$（$（所选订单Id:“+”））；

---

在JSFIDLE中进行了清理，因此JS现在显示：

$(function () {
    $('#orderModal').modal({
        keyboard: true,
        backdrop: "static",
        show: false,
    });

    $(".table-striped").find('tr[data-id]').on('click', function (e) {
        $('#orderDetails').html("<b>  Order Id selected: <img src=\"" + $(e.target).parent().data('chi') + "\" alt=\"Smiley face\"></b>");
        $('#orderModal').modal('show');
    });
});

$（函数（）{
$（'#orderModal'）.modal({
键盘：没错，
背景：“静态”，
秀:假,，
});
$（“.table striped”）.find（'tr[data id]”）。on（'click'，函数（e）{
$（'#orderDetails'）.html（“所选订单Id:”）；
$（'orderModal'）.modal（'show'）；
});
});

---

基本上，要了解是什么触发了事件，您必须将事件对象（

e

）传递到回调中，然后在触发事件的dom中四处查看。在这种情况下，这取决于行，因为用户将单击表中给定的

，而带有

数据id

属性的

是其父项。

使用字符串连接

$（函数（）{
var$orderModal=$（'#orderModal'）.modal({
键盘：没错，
背景：“静态”，
秀:假,，
});
$（'.table striped tr[data id]'）。on（'click'，function（）{
$orderModal.html（'orderid selected:'）；
$orderModal.modal（'show'）；
});
});

命令
身份证件
顾客
地位
1.
24234234
A.
2.
24234234
A.
3.
24234234
A.
x
命令
接近