select nested data-click within data-template

Question

My template involving parent div with attribute of data-template and child button with attribute of data-click:

<script type="text/html" id="containerTemplate">
    <div data-template="myTemplate">    
        <ul>      
          <li>
            <button type="button" data-click="done">
              <span>some text</span>
            </button>
          </li>
        </ul>
    </div>  
</script>

How can i select the button with the data-click="done"?

I've tried this

const doneBtn = document.querySelector('[data-template = myTemplate] [data-click = done]');
if (doneBtn) {
    //register some event listeners
}

But the doneBtn is returning null.

If you are using jQuery, you can use .data() (Source: api.jquery.com/data) or you can use $(selector).attr("data-click") === "done" — Waleed Iqbal
– Waleed Iqbal, Commented Jan 29, 2018 at 8:34
If you are interested in doing it without jquery, follow this ... stackoverflow.com/questions/15912246/… — Waleed Iqbal
– Waleed Iqbal, Commented Jan 29, 2018 at 8:36
are you familiar with templates? you have to actually inject that script template in the DOM to be able to target it with querySelector — pumpkinzzz
– pumpkinzzz, Commented Jan 29, 2018 at 9:54

Abdullah Shoaib · Accepted Answer · 2018-01-29 10:34:54Z

1

You put your html code in javascript tags that's why javascript was unable to access your html DOM. Try below code it will work.

<div data-template="myTemplate">    
    <ul>      
      <li>
        <button type="button" data-click="done">
          <span>some text</span>
        </button>
      </li>
    </ul>
</div> 


<script type="text/javascript">
 const doneBtn = document.querySelector('[data-template = myTemplate] [data-click = done]');
if (doneBtn) {
    //register some event listeners
    console.log($(doneBtn).html());
}
  </script>

answered Jan 29, 2018 at 10:34

Abdullah Shoaib

4642 gold badges6 silver badges18 bronze badges

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

Collectives™ on Stack Overflow

select nested data-click within data-template

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related