0

After click and change data-visible value, I can't select data-visible with new value.

JS:

$('#imageUploadAction').on('click', function(e) {
 $('#imageUploadAction').html('Close');
 $('.image-upload-action').toggleClass('h-100 show');
 $('#imageUploadAction').attr('data-visible', 'show');
 $('.image-upload-action-btn').removeClass('d-none');
 $('.image-upload-action-btn').addClass('d-block');
});
$('#imageUploadAction[data-visible="show"]').on('click', function(e) {
 console.log('ok');
});

HTML:

<div class="image-upload-action d-flex align-items-center flex-column">
  <a id="imageUploadAction" href="javascript:void(0)" data-visible="hide">edit</a>
  <div class="image-upload-action-btn d-flex justify-content-center align-items-center mt-auto d-block">
    data
  </div>
</div>

How can I fix this problem?

Demo Here

Improve this question

3 Answers 3

Reset to default
1

You rather put the value of data-visible in string and check it with a if

$('#imageUploadAction').on('click', function(e) {
  let getStatut = $(this).attr('data-visible');
  
  console.clear();
  console.log(getStatut);
  
  if (getStatut == "hide") {
   $(this).html('Close').attr('data-visible', 'show');
   $(this).parent('.image-upload-action').toggleClass('h-100 show');
   $(this).next('.image-upload-action-btn').removeClass('d-none').addClass('d-block');
  } else {
    // show
   $(this).html('Open').attr('data-visible', 'hide');
   $(this).parent('.image-upload-action').toggleClass('h-100 hide');
   $(this).next('.image-upload-action-btn').removeClass('d-block').addClass('d-none');  
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="image-upload-action d-flex align-items-center flex-column">
  <a id="imageUploadAction" href="javascript:void(0)" data-visible="hide">edit</a>
  <div class="image-upload-action-btn d-flex justify-content-center align-items-center mt-auto d-block">
    data
  </div>
</div>

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

2 Comments

$(this).find('.image-upload-action-btn').removeClass('d-none').addClass('d-block'); This element does not exist yet.
I edited my code. Use next() instead : api.jquery.com/next and parent() for '.image-upload-action' : api.jquery.com/parent
0

The element does not exist yet

At the time you add a click handler for #imageUploadAction[data-visible="show"] no element with this selector exists.

Use this to bind the click handler to .image-upload-action and any future element with the selector:

$('.image-upload-action').on('click', '#imageUploadAction[data-visible="show"]', function(e) {
 console.log('ok');
});

See jQuery documentation here:
https://api.jquery.com/on/#on-events-selector-data

Improve this answer

4 Comments

Just small issue, this will trigger that click event on the first click which might not be something OP wants.
if you change main value of data-visible to show u can see the element exist! The problem is: when we change data-visible to show, the new data-visible doesn't exist.
My point was that this click event on #imageUploadAction[data-visible="show"] will be executed on the initial click of edit based on the current code, even though the initial data-visible is set to false. So it could be that OP doesn't want to run this click event that logs ok on the initial click on edit, because data-visible is then changed to value show in the code and then maybe only on the future click this second click event should work.
But I'm just guessing here
0 
$('#imageUploadAction').on('click', function() {
    if($(this).data('visible') === 'show') {
        console.log('data visible is show');
        $(this).html('Edit').data('visible', 'hide');
    } else {
        console.log('data visible is hide');
        $(this).html('Close').data('visible', 'show');
    }
    $('.image-upload-action').toggleClass('h-100 show');
    $('.image-upload-action-btn').toggleClass('d-block d-none');
});

I'm assuming you are toggling the actions between Edit and Close. I have simplified your code and handled data attributes using jQuery data and chained multiple jquery methods on the common selector. You can replace this and check in your jsFiddle. Multiple click handlers are not ideal to have, so just use one and check the value of the attribute and make decisions based on it. You can add else if to add more values other than show and hide.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.