jQuery - Add Remove Class - Set Value Of Input

Question

Hi I need this to Add Remove Classes & Set Value of nextAll input.

I can make it work but it only works for one time. I need it to be more like a toogle.

$(document).ready(function () {
    $(".fa-circle").click(function () {
        $(this).nextAll('input').first().val('Yes');
        $(this).removeClass("fa-circle light_gray").addClass("fa-check green");
    });
    $(".fa-check").click(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.8.3/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>

Anyone can see what i am doing wrong?

the fa-check & fa-circle are awesome fonts

I also got it in jsfiddle https://jsfiddle.net/9bonuyyn/1/

Ibrahim Khan · Accepted Answer · 2016-05-07 09:54:29Z

1

You need event delegation for dynamically added class. And also you can shorten your js like following.

$('.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");
});

UPDATED FIDDLE

edited May 7, 2016 at 9:54

answered May 7, 2016 at 9:40

Ibrahim Khan

20.8k7 gold badges46 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

John Over a year ago

It needs a $(document).ready(function() { } to wok in my page

Ibrahim Khan Over a year ago

Yes if you add your js before .candi_elections_table the $(document).ready(function() { }) is needed. @John

Rayon · Accepted Answer · 2016-05-07 09:42:56Z

$(SELECTOR) will select only those element which are present in the DOM and which matches the selector.

As class of the element is being updated dynamically, use Event delegation

Basically we are attaching event on parent which is persistent throughout the life-cycle of the application and by specifying the target-element which are children of the parent mentioned.

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

Fiddle Demo

Haizhou Liu · Accepted Answer · 2016-05-07 10:12:10Z

0

It only works once because you add the event listener when $(document).ready, at that time only the first and the third has class fa-circle, so these two element will not run fa-check click event, even after click - you add fa-check class to them. The same for second and fourth.

Please try this:

$(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" )
  });
});

Hope this is useful.

answered May 7, 2016 at 10:12

Haizhou Liu

4912 silver badges9 bronze badges

Collectives™ on Stack Overflow

jQuery - Add Remove Class - Set Value Of Input

3 Answers 3

2 Comments

Fiddle Demo

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related