-1

我想在 HTML 正文中添加元素，但我遇到了问题。onclick 功能不起作用，因为我在该功能中吹错了。以下是我的html中的附加代码

var html= "<button class='btn fab-success' type='button' onclick='openTabGeneral('tab_map', 'Web GIS', 'client/map/index.html', 'Get', 'yes')'>Click</button>";
$("body").append(html);

该html代码的结果是

onclick="openTabGeneral(" 'tab_map'',''webgis'',''client/map/client="" map="" index.html'',''get'',''yes'')'=""

我想要这样的结果

onclick="openTabGeneral('tab_map', 'webgis', 'client/map/index.html', 'get', 'yes')"

请告诉我如何更改这样的代码^

4

1 回答 1

1

短期修复是转义您在 HTML 字符串中创建的属性中的引号：

var html = '<button class="btn fab-success" type="button" onclick="openTabGeneral(\'tab_map\', \'Web GIS\', \'client/map/index.html\', \'Get\', \'yes\')">Click</button>';
$("body").append(html);

function openTabGeneral() {
  console.log(arguments);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

但是，更好的方法是手动构建元素，并在其上使用不显眼的事件处理程序，这完全避免了这个问题。为此，您可以使用委托的事件处理程序和data属性，如下所示：

$(document).on('click', 'button', function() {
  console.log($(this).data()); // all arguments
  console.log($(this).data('arg1')); // specific argument
});

$('<button />', {
  'class': 'btn fab-success',
  'type': 'button', 
  'text': 'Click',
  'data-arg1': 'tab_map',
  'data-arg2': 'Web GIS',
  'data-arg3': 'client/map/index.html',
  'data-arg4': 'Get',
  'data-arg5': 'yes' // this should probably be a boolean, not a string
}).appendTo('body');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

于 2020-02-05T16:36:04.277 回答