时间戳

首页 > 解决方案 > jquery如何使用onclick

html - jquery如何使用onclick

问题描述

这段代码在下拉菜单上工作得很好。但是，我想将其更改为在单击 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>

标签： htmljqueryajaxcoldfusion

解决方案

考虑以下。

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

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

推荐阅读