我读到使用 onclick
已被弃用并且是不好的做法。
我有这个 do_something
函数,它将处理 onclick
中的数据。我如何将其转换为 javascript:
{% for user in all_user %}
<tr>
<td>{{ user.code }}</td>
<td>
<button type="button" onclick="do_something('{{ user.name }}', '{{ user.age }}', 1, '{{ user.desc }}');">small</h6></button>
</td>
</tr>
{% endfor %}
最佳答案
- 在按钮上设置一个类选择器,这样您就可以通过 Javascript 将事件监听器应用于它。
- 您的函数需要每个用户唯一的参数,因此您需要将这些参数设置为每个按钮上的数据属性。
{% for user in all_user %}
<tr>
<td>
<button class="user-action-btn" type="button"
data-name="{{ user.name }}"
data-age="{{ user.age }}"
data-desc="{{ user.desc }}">small</button>
</td>
</tr>
{% endfor %}
- 在 Javascript 中,按类名获取元素并为每个元素设置事件处理程序。
这是一个 Javascript 代码示例
(function() {
var classname = document.getElementsByClassName("user-action-btn");
var myFunction = function(e) {
e.preventDefault();
var name = this.getAttribute("data-name");
var age = this.getAttribute("data-age");
var desc = this.getAttribute("data-desc");
do_something(name, age, 1, desc)
};
for (var i = 0; i < classname.length; i++) {
classname[i].addEventListener('click', myFunction, false);
}
})();
这是 JQuery 的等价物
$( document ).ready(function() {
$('.user-action-btn').on('click', function(e){
e.preventDefault();
var name = $(this).data('name');
var age = $(this).data('age');
var desc = $(this).data('desc');
do_something(name, age, 1, desc);
});
关于javascript - Django 模板 onclick 内联 html javascript 替代,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48897414/