jQuery 数据属性选择器在单击时不起作用

Question

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

Answer 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>

Answer 2

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

Answer 3

$('#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.