多次触发JQuery onclick事件

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

请注意，我已经尝试过使用解除绑定方法的preventDefault。 onload函数与div click事件没有任何关系。点击事件被调用两次甚至多次。任何想法，为什么这可能发生？

Answer 1

由于您没有与bind侦听器绑定任何事件，因此，unbind对于删除先前绑定的事件没有任何影响。

从文档：使用带有.bind()

事件处理程序可以与.unbind()被移除。在最简单的情况下，如果没有参数，.unbind（）会删除附加的所有处理程序到元素。

另一个建议是使用HTML5的data-*属性来存储数据：在JS侧

<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> 

现在做到这一点：

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