如何使jQuery中按钮点击事件仅作用于单个指定按钮？

嘿，我来帮你搞定这个问题！你现在的代码里$("button")是选中页面上所有的按钮元素，所以不管点哪个按钮都会触发这个JSON请求和后续操作。要让它只作用于单个按钮，有几个简单的方法：

方法1：给目标按钮添加ID（最推荐的单按钮场景） #

先给你想要触发事件的按钮加一个唯一ID，比如：

<button id="my-target-button">点击我触发请求</button>

然后把你的jQuery代码里的选择器改成针对这个ID：

$(document).ready(function(){
  // 只选中ID为my-target-button的按钮
  $("#my-target-button").click(function(){
    $.getJSON("js/jobs.json", function(result){
      $.each(result, function(i, field){
        $("div").append(field + " ");
      });
    });
  });
});

方法2：给目标按钮添加类（适合扩展到多个特定按钮的场景） #

如果以后你可能需要多个按钮触发这个事件，就给这些按钮加同一个类：

<button class="json-trigger-btn">按钮1</button>
<button class="json-trigger-btn">按钮2</button>

然后代码里用类选择器：

$(document).ready(function(){
  $(".json-trigger-btn").click(function(){
    $.getJSON("js/jobs.json", function(result){
      $.each(result, function(i, field){
        $("div").append(field + " ");
      });
    });
  });
});

方法3：通过父容器定位按钮 #

如果你的按钮在某个特定的容器里，也可以通过容器来限定选择范围，比如：

<div id="special-section">
  <button>我是特定区域的按钮</button>
</div>

代码里这样写：

$(document).ready(function(){
  $("#special-section button").click(function(){
    $.getJSON("js/jobs.json", function(result){
      $.each(result, function(i, field){
        $("div").append(field + " ");
      });
    });
  });
});

另外提个小建议：你现在的$("div").append(...)也会给页面上所有div添加内容，如果只想添加到某个特定div，最好也给那个div加ID或者类，比如$("#result-div").append(...)，这样就不会影响其他div啦！

内容的提问来源于stack exchange，提问作者user2489295