jquery klicken Sie auf ein Kontrollkästchen, das ausgeblendet ist

Question

Ich versuche, einen Farbfilter für eine Website zu machen. Wo ich das sichtbare checkbox entfernen möchte (ich habe das funktioniert), entfernen Sie die Etiketten etc. Und nur ein div mit einer Hintergrundfarbe < lassen - das alles funktioniert. Aber jetzt weiß ich nicht, wie man diese divs klickbar macht, da das Eingabefeld versteckt ist. Gibt es eine Möglichkeit, dies in jQuery zu beheben?

Hier ist mein Code:

function onDataReceived(data) { 
     $.each(data.colorInfo, function(key, colorInfo) { 
      var inputElement = $("input[name^=filter][value="+colorInfo.id+"]").css("display", "none"); 
      var labelElement = $('label[for^=filter]').remove(); 
      var div = inputElement.parent(); 

      div.attr('class', 'myclass_'+colorInfo.id); 
      div.css("background-color", colorInfo.colorCode); 
      div.css("width", "15px"); 
      div.css("height", "15px"); 
      div.css("display", "inline-block"); 
      div.css("marginLeft", "5px"); 
      div.css("marginBottom", "5px"); 
      //console.log(colorInfo); 
     }); 
    } 

    $(document).ready(function() { 
     var url = 'myapi.json'; 
     $.get(url, onDataReceived); 
    }); 

Und der HTML:

<div class="filter_3"> 
    <input name="filter[]" value="152194" type="checkbox"/> 
    <label for="filter_152194">Rood</label> 
</div> 
<div class="filter_4"> 
    <input name="filter[]" value="152196" type="checkbox"/> 
    <label for="filter_152196">Blauw</label> 
</div> 
<div class="filter_5"> 
    <input name="filter[]" value="152198" type="checkbox"/> 
    <label for="filter_152198">Oranje</label> 
</div> 

Answer 1

Unter der Annahme, dass eine Funktion, sobald die div geklickt heißt es:

function onDataReceived(data) { 
    $.each(data.colorInfo, function(key, colorInfo) { 
     var inputElement = $("input[name^=filter] [value="+colorInfo.id+"]").css("display", "none"); 
     var labelElement = $('label[for^=filter]').remove(); 
     var div = inputElement.parent(); 

     div.attr('class', 'myclass_'+colorInfo.id); 
     div.css("background-color", colorInfo.colorCode); 
     div.css("width", "15px"); 
     div.css("height", "15px"); 
     div.css("display", "inline-block"); 
     div.css("marginLeft", "5px"); 
     div.css("marginBottom", "5px"); 
     /* Added Lines */ 
     div.css("pointer-events", "auto"); //Just in case, but it's probably not necessary 
     div.css("cursor", "pointer"); //It's nice to have 
     div.on('click', function() { //This is a click event delgated to the div 
      // Whatever code is needed when div is clicked 
     }); 
     //console.log(colorInfo); 
    }); 
} 

$(document).ready(function() { 
    var url = 'myapi.json'; 
    $.get(url, onDataReceived); 
});