jquery如何使用onclick

Question

此代码在下拉列表中运行良好。但是，我想将其更改为在单击 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>

这里是 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>  

我确实在互联网搜索中看到我可以使用 onclick，因为它被列为可以完成但没有语法的事情。对不起。我被卡住了。这是一对失败的夫妇。

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

我也试过了

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

Answer 1

考虑以下内容。

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

当您单击<div> 时，它没有自然的value 属性。如果您已将其添加为属性，则可以使用 .attr() 调用它。