jQuery - 添加删除类 - 设置输入值

您需要动态添加类的事件委派。您也可以像下面这样缩短js。

$('.candi_elections_table').on("click", ".fa-circle, .fa-check", function () {
    if ($(this).hasClass('fa-circle')) {
        $(this).nextAll('input').first().val('Yes');
    } else {
        $(this).nextAll('input').first().val('No');
    }
    $(this).toggleClass("fa-check green fa-circle light_gray");
});

更新的小提琴

$(SELECTOR)将仅选择DOM中存在的那些元素，并且与selector匹配。

当元素的类正在动态更新时，请使用Event delegation

基本上，我们将事件附加到父级上，该事件在应用程序的整个生命周期中持续存在，并通过指定上述父级的子项target-element。

$(document).ready(function() {
  $('.candi_elections_table').on('click', ".fa-circle", function() {
    $(this).nextAll('input').first().val('Yes');
    $(this).removeClass("fa-circle light_gray").addClass("fa-check green");
  });
  $('.candi_elections_table').on('click', ".fa-check", function() {
    $(this).nextAll('input').first().val('No');
    $(this).removeClass("fa-check green").addClass("fa-circle light_gray");
  });
});

.green {
  color: #8FCE35;
}
.light_gray {
  color: #DDDDDD;
}
.point {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table class="candi_elections_table" align="center" style="text-align: left;">
  <tbody>
    <tr>
      <td>198</td>
      <td>
        <span class="fa-check font16 green point">CLICK HERE</span>
        <input id="198" class="" type="text" data-tooltip="" data-load-state="" data-inputmask="" style="" title="" placeholder="" value="" name="198" vk_11844="subscribed">
      </td>
      <td>Something 1</td>
    </tr>
    <tr>
      <td>200</td>
      <td>
        <span class="fa-circle font16 light_gray point">CLICK HERE</span>
        <input id="200" class="" type="text" data-tooltip="" data-load-state="" data-inputmask="" style="" title="" placeholder="" value="" name="200" vk_11844="subscribed">
      </td>
      <td>Something 2</td>
    </tr>
    <tr>
      <td>201</td>
      <td>
        <span class="fa-check font16 green point">CLICK HERE</span>
        <input id="201" class="" type="text" data-tooltip="" data-load-state="" data-inputmask="" style="" title="" placeholder="" value="" name="201" vk_11844="subscribed">
      </td>
      <td>Something 3</td>
    </tr>
    <tr>
      <td>202</td>
      <td>
        <span class="fa-circle font16 light_gray point">CLICK HERE</span>
        <input id="202" class="" type="text" data-tooltip="" data-load-state="" data-inputmask="" style="" title="" placeholder="" value="" name="202" vk_11844="subscribed">
      </td>
      <td>Something 4</td>
    </tr>
  </tbody>
</table>

小提琴演示

它只工作一次，因为你在$(document).ready时添加了事件侦听器，当时只有第一个和第三个有类fa-circle，所以这两个元素不会fa-check单击事件运行，即使在单击之后 - 你向它们添加fa-check类。第二和第四也是如此。

请尝试以下操作：

$(document).ready(function(){
    $(".fa-circle, .fa-check").click(function(){
    var text = $(this).hasClass('fa-circle') ? 'Yes':'No';
    $(this).nextAll('input').first().val(text);
    $(this).toggleClass( "fa-circle light_gray fa-check green" )
  });
});

希望这是有用的。