1

我有一个可行的解决方案，但我想知道最好的方法。

我有一个生成项目表的模板，如下所示：

{% for item in item_list %}
    {{ item.name }}: <button onclick="doSomething({{item.id }})">Click Me!</button>
{% endfor %}

<script>
function doSomething(item_id) {
    // Do stuff here
    // Is actually an ajax request which sends the item's id
}
</script>

这非常有效，但是我知道在 Javascript 中使用侦听器而不是onlick.

拥有一个功能并item.id根据单击的按钮动态地将其注入其中的最佳方法是什么？

我能想到的唯一方法是item_list在Javascript中循环遍历并为每个item按钮创建一个函数。这是最好的方法吗？

{% for item in item_list %}
    {{ item.name }}: <button id="btn-{{ item.id }}">Click Me!</button>
    {% endfor %}

<script>
{% for item in item_list %}
    jQuery("#btn-{{ item.id }}").click(function() {
      // Do the stuff with {{ item.id }}
    });
{% endfor %}
</script>

在我看来，这取决于它的长度item_list可能会生成很多 Javascript。这是一个问题吗？有没有更好的办法？

4

2 回答 2

5

我会这样做：

{% for item in item_list %}
    {{ item.name }}: <button class="button-item" id="btn-{{item.id}}">Click Me!</button>
{% endfor %}

在jQuery中，

jQuery(document).on('click', ".button-item", function(){
    var $this = $(this);
    var id = $this.attr('id').split('-')[1];
    //do stuff with this id or $this element
});

在这里，您的侦听器正在侦听单个类button-item，该类应用于生成的所有项目节点。点击时，获取被点击节点的 ID。

于 2013-09-19T15:01:46.483 回答
1

您可以使用data-* 属性将任意数据添加到 HTML 5 标记。例如：

{% for item in item_list %}
    {{ item.name }}: <button class="item" data-item-id="{{ item.id }}">Click Me!</button>
{% endfor %}

并在一个单独的 JavaScript 文件中（此特定示例基于 jQuery，但不是必需的）：

$('.item').click(function() {
    var item_id = $(this).data('item-id');
    alert(item_id);
});
于 2013-09-19T19:49:46.627 回答