CODEWITHSUNDEEP
javascriptjqueryhtml
Robert Prine
Robert Prine

Reputation: 2753

jQuery on click trouble

I am having trouble with my jQuery on click function. I can't figure out what I'm doing wrong since it isn't even registering the click in the console (I have set breakpoints and it refuses to visit my on click). I am using jQuery in other areas of my code, so I think I have linked it correctly, and I have checked the target several times to make sure that it is a class and I'm using the correct syntax, but I must have missed something. I feel like I have just been looking at it too long. Any help would be appreciated.

HTML:

<h3 class="collapseButton leftH3" data-toggle="collapse" data-target=".collapse_me">
    Returns information about the current User 
    <span class="pull-right" id="arrow_me">
        <i class="fa fa-arrow-down" aria-hidden="true"></i>
    </span>
</h3>

JS: 

function changeArrows() {
    $('.collapseButton').on("click", function() {
        $(this).next('.pull-right')
          .html('<i class="fa fa-arrow-up" aria-hidden="true"></i>');
    });
}
changeArrows();

Upvotes: 1

Views: 182

Answers (7)

sujit kumar
sujit kumar

Reputation: 72

function setVisibility(id1,id2,id3) {
if(document.getElementById('bt1').value=='Show Box 3'){
document.getElementById('bt1').value = 'Show Box 4';
document.getElementById('bt1').value = 'Show Box 5';
document.getElementById(id1).style.display = 'inline';
document.getElementById(id2).style.display = 'none';
document.getElementById(id3).style.display = 'none';
}else{
document.getElementById('bt1').value = 'Show Box 3';
document.getElementById(id1).style.display = 'none';
document.getElementById(id2).style.display = 'inline';
document.getElementById(id3).style.display = 'inline';
}
}
<h4 class="pro_detail_title_name_new" >Product Description
<button type=button name=type id='bt1' onclick="setVisibility('sub3','sub4','sub5');";><span id="sub3" class="mobile-plus1"style="display:inline;" >+ </span><span id="sub5" class="fbutton"style="display:none;">-</span> </button></h4>

<div id="sub4"style="display:none;">-- inside --</div>

Upvotes: 0

cubanGuy
cubanGuy

Reputation: 1296

You can also just toggle the class for the i element without changing html:

$(".collapseButton").click(function(e) {
$(this).children('.pull-right').children('.fa-arrow-down').toggleClass('fa-arrow-up');
});

Upvotes: 0

Shnoo
Shnoo

Reputation: 71

The on click is triggert but your selecotor is not correct.

$(this).children('.pull-right').html('<i class="fa fa-arrow-up" aria-hidden="true"></i>');

works fine for me (changed next for children)

Upvotes: 1

Oussama BEN MAHMOUD
Oussama BEN MAHMOUD

Reputation: 1472

You have to use children not next

function changeArrows() {
    $('.collapseButton').on("click", function() {
       $(this).children('.pull-right')
           .html('<i class="fa fa-arrow-up" aria-hidden="true"></i>');
    });
}

Upvotes: 4

Gavin
Gavin

Reputation: 4515

Try putting the body of your function in $(document).ready( ... ). I don't think your event handler is available after this function is run. The .next() will also find the next sibling, but the element you're wanting to change is a child.

$(document).ready(function() {
  $('.collapseButton').on("click", function() {
    $(this).children('.fa.fa-arrow-up')
       .html('<i class="fa fa-arrow-up" aria-hidden="true"></i>');
  });
})

Upvotes: 0

Orpheus
Orpheus

Reputation: 767

Okay, rewrote it to do what you want it to do. Note that instead of next() (which gets the following sibling element with the given selector), you want children() (which gets the child elements of $(this)).

$(this) ends up resolving to be the h3 element in almost every case.

$(document).ready(function() {
  $('.collapseButton').on('click', function(event) {
    $(this).children('.pull-right')
      .html('<i class="fa fa-arrow-up" aria-hidden="true"></i>');
  });
});

Upvotes: 0

Theodoros Klikas
Theodoros Klikas

Reputation: 2129

Have you tried 

$(document).ready(function(){ 
 changeArrows();
});

Upvotes: 0

Related Questions