jquery how to use onclick

Question

This code works on a dropdown very well. However I would like to alter it to use in on the click of a div.

<script>            
$(document).ready(function() {            
  $result = $("#result");
  console.log(window.event.target.id)
  $("#optionsx").click(function(e) {
    var selected = $(this).val();
    console.log('change:', selected);
    if(selected === '--') return;
    $.get("/inside/fusebox/view/communications/locations/getsite.cfc?method=dostuff", {input:selected}, function(res) {
      $result.html(res);
    },"JSON");
  });
})
</script>

Here is the div

<div class="container"> 
  <cfoutput>    
  <cfloop query = "availablesites">
  <div class="filterDiv #typelist#" onclick ="loaddoc()" id = "optionsx" value ="#availablesites.siteid#">#availablesites.sitename#
  </div>
  </cfloop> 
  </cfoutput>
</div>  

I did see on an internet search I could use onclick because it was listed as a thing that can be done but there was no syntax. Sorry. I have been stuck. Here is a couple that failed.

<script>            
$(document).ready(function() {            
  $result = $("#result");
  console.log(window.event.target.id)
  $("#optionsx").onclick(function(e) {
    var selected = $(this).val();
    console.log('onclick:', selected);
    if(selected === '--') return;
    $.get("/inside/fusebox/view/communications/locations/getsite.cfc?method=dostuff", 
    { input:selected }, function(res) {
      $result.html(res);
    },"JSON");
  });
})
</script>

and I tried this too

<script>
function loaddoc() {
  $.get("/inside/fusebox/view/communications/locations/getsite.cfc?method=dostuff", {input:selected}, function(res) {
    $result.html(res);
  }
}
</script>

Answer 1

Consider the following.

$(function() {
  var $result = $("#result");
  $(".options").click(function(e) {
    var selected = $(this).attr("value");
    console.log('change:', selected);
    if (selected === '--') return;
    $.get("/inside/fusebox/view/communications/locations/getsite.cfc?method=dostuff", {
      input: selected
    }, function(res) {
      $result.html(res);
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <cfoutput>
    <cfloop query="availablesites">
      <div class="options filterDiv #typelist#" value="#availablesites.siteid#">#availablesites.sitename#</div>
    </cfloop>
  </cfoutput>
</div>

When you click on a <div> it does not have a natural value property. If you've added it as a attribute, you can call it using .attr().