javascript - Jquery ReplaceWith 保持 onclick

Question

如何使用 JQuery ReplaceWith 保留 onclick="" 值？我正在制作一个预加载每个图像并将其放在 Javascript image() 对象上的 Assets 系统，并为 img url 使用特殊的数据属性

<img data-assets="images/test.png" onclick="alert('test')">

变成:(使用jquery ReplaceWith)

<img src="assets/images/test.png">

我想要什么:

<img src="assets/images/test.png" onclick="alert('test')">

我的代码:

$("[data-assets]").each(function() {
    $(this).replaceWith(Game.Preloading.Assets.Images[$(this).data('assets')]);
});

我该如何解决这个问题？谢谢

Answer 1

在迭代每个 [data-assets] 元素时，您可以在替换元素之前设置相应的 onclick 属性:

$("[data-assets]").each(function() {
  var $newImg = $(Game.Preloading.Assets.Images[$(this).data('assets')]);
  $newImg.attr('onclick', $(this).attr('onclick'));

  $(this).replaceWith($newImg);
});

但是，最好在现有元素上添加 src 属性，而不是替换它:

$("[data-assets]").each(function() {
  this.src = $(Game.Preloading.Assets.Images[$(this).data('assets')]).attr('src');
});

理想情况下，您应该使用 unobtrusive JavaScript并避免使用内联 JavaScript 事件监听器，但上述两个片段都应该有效。