jQuery data-attribute selector doesn't work on click-CodePudding

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 >
  <a id="imageUploadAction" href="javascript:void(0)" data-visible="hide">edit</a>
  <div >
    data
  </div>
</div>

How can I fix this problem?

Demo Here

CodePudding user response：

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 >
  <a id="imageUploadAction" href="javascript:void(0)" data-visible="hide">edit</a>
  <div >
    data
  </div>
</div>

CodePudding user response：

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

CodePudding user response：

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