Событие 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)}); 
    }); 
}; 

Обратите внимание, что я уже пытался использовать UNBIND метод и preventDefault. Функция onload не имеет никакого отношения к событию div. Событие click вызывается дважды и даже несколько раз. Любые идеи, почему это может произойти?

Answer 1

Поскольку вы не связали какое-либо событие с слушателем bind, значит, unbind не повлияет на удаление ранее связанного события.

Из документов: обработчики

событий, присоединенные с .bind() могут быть удалены с .unbind(). (Начиная с jQuery 1.7, методы .on() и .off() предпочтительны для прикрепления и удаления обработчиков событий на элементах.) В простейшем случае без аргументов .unbind() удаляет все обработчики к элементам.

Еще одно предложение заключается в использовании атрибута html5 в 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); 
    }); 
});