Question

我读到使用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 %}

Answer 1

在按钮上设置类选择器，以便您可以通过Javascript将事件监听器应用于它。
您的功能需要每个用户唯一的参数，因此您需要在每个按钮上将这些参数设置为数据属性。

＆＃13;

{% 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 %}

＆＃13;

在Javascript中，按类名获取元素并为每个元素设置事件处理程序。

以下是Javascript中代码的示例

＆＃13;

(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);
        }
})();

＆＃13;

这里是JQuery的等价物

＆＃13;

$( 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);
});

＆＃13;

Django模板onclick内联html javascript替代方案

1 个答案: