JQuery onclick Ereignis mehrfach ausgelöst

Question

Ich habe mehrere Themen zu diesem Thema gelesen, aber das Problem besteht immer noch. Ich habe eine Vorlage 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)}); 
    }); 
}; 

Bitte beachte, dass ich bereits versucht habe unbind Methode und prevent zu verwenden. Die Onload-Funktion hat nichts mit dem div click-Ereignis zu tun. Das Klickereignis wird zweimal und sogar mehrmals aufgerufen. Irgendwelche Ideen, warum das passieren könnte?

Answer 1

Da Sie kein Ereignis mit bind Listener gebunden haben, hat unbind keinen Effekt, das zuvor gebundene Ereignis zu entfernen.

Aus der Dokumentation:

Eventhandler mit .bind() gebunden ist, kann mit .unbind() entfernt werden. (ab jQuery 1.7 werden die Methoden .on() und .off() zum Anhängen und Entfernen von Ereignishandlern für Elemente bevorzugt.) Im einfachsten Fall ohne Argumente entfernt .unbind() alle angefügten Handler zu den Elementen.

Ein weiterer Vorschlag ist html5 die data-* Attribut zu verwenden, um Daten zu speichern:

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

nun an der js Seite tun:

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