多次觸發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); 
    }); 
});