Question

我已经阅读了几个主题，但问题仍然存在。我有一个Django模板：

<tr>                                
   {% if task.status.id == 3 %} 
      <td onclick = 'fulfillment_status({{task.id}}, 2)'>
         <div style = 'color:green'</div>
      </td>         
   {% else %}
      <td onclick = 'fulfillment_status({{task.id}}, 3)'></td>
   {% endif %}  

</tr>

JS：

var fulfillment_status = function(task_id, status_id)
{
    alert('sdf');
    $.post('/task_list/set_task_status/' + task_id + '/' + status_id + '/', function (new_status){
        if (new_status.id == 3)
        {
            $('#status_icon_' + task_id).children().css('color', 'green');          
        }
        else
        {
            $('#status_icon_' + task_id).children().css('color', 'red');
        }
        $('#status_icon_' + task_id).unbind('click').click(function (e) { e.preventDefault(); fulfillment_status(task_id, new_status.id)});
    });
};

请注意，我已经尝试过使用unbind方法和preventDefault。 onload函数与div click事件没有任何关系。 click事件被调用两次甚至多次。有什么想法可能会发生吗？

Answer 1

由于您没有使用bind侦听器绑定任何事件，因此unbind无法删除之前绑定的事件。

来自文档：

.bind()附带的事件处理程序可以使用.unbind()删除。 （从jQuery 1.7开始，.on（）和.off（）方法首选在元素上附加和删除事件处理程序。） 在最简单的情况下，没有arguments，.unbind（）删除附加到元素的所有处理程序。

另一个建议是使用html5＆＃39; data-*属性来存储数据：

<tr>                                
   {% if task.status.id == 3 %} 
      <td class='status_icon' data-task-id="{{task.id}}" data-status-id="2">
         <div style = 'color:green'</div>
      </td>         
   {% else %}
      <td class='status_icon' data-task-id="{{task.id}}" data-status-id="3"></td>
   {% endif %}  
</tr>

现在在js方面这样做：

var fulfillment_status = function(task_id, status_id) {
  alert('sdf');
  $.post('/task_list/set_task_status/' + task_id + '/' + status_id + '/', function(new_status) {
    if (new_status.id == 3) {
      $('#status_icon_' + task_id).children().css('color', 'green');
    } else {
      $('#status_icon_' + task_id).children().css('color', 'red');
    }
  });
};

$(document).ready(function() {
  $('.status_icon').on('click', function(e) { // <--try adding a common class name to bind the click event.
    e.preventDefault();
    var task_id = $(this).data('taskId'),
        new_status = $(this).data('statusId');
    fulfillment_status(task_id, new_status);
  });
});

JQuery onclick事件多次触发

1 个答案: