Added custom attribute not triggering a script

3616 views javascript
8

I am using a script src which makes it possible to open a lightbox frame when a custom attribute is added to an element.

An example looks like this

<button data-custom-attr="123"> </button>

It works when I add it manually, however first I must replace a similar script that is already in place, by removing some attributes first.

I'm using jQuery to select the element, remove the attributes, and to add new ones. However when I add them to an element, clicking it doesn't trigger the lightbox pop-up. I have also tried creating a new element and replacing current one with it, but it didn't work either.

What can be the possible reason? Is it possible to achieve this using jQuery?

The code I'm using:

<button class="mybtn" data-prop='1'></button>

javascript

jQuery(".mybtn").each(function (index, object) {

  $(this).removeAttr('data-prop');
  $(this).attr('data-custom-attr','123');


});

(the attribute is added to the element when I inspect it)

answered question

We can't really help you to debug code that you aren't showing us.

Pls post your code :)

2 Answers

7

Try to trigger the event by binding the click on the body, not on the button itself, ex:

$('body').on('click', '[data-custom-attr="123"]', function(){
    // the code when button is clicked
}

posted this
13

I believe, the lightbox script is running once on DOM-Ready. If you manipulate the DOM after maybe the script doesn't notice that. Is it possible to rerun the script?

posted this

Have an answer?

JD

Please login first before posting an answer.