Set bootstrap data-toggle inside <a> tag dynamically through javascript

Question

I am trying to dynamically create datatables in tabs based on an input and so far I have no problems creating the datatables and tabs. However, when I click on the tab, i cant toggle to the data I want. I have no problems doing it manually like this:

<a href="#tabTable2" data-toggle="tab" class="test"></a>

However, I want to add the "data-toggle" attribute through javascript/jquery and I can't find a way to do it. Anyone has any idea how to overcome this issue or have any workarounds?

This is my code:

        var tabHyperLink = document.createElement("a");
        tabHyperLink.href = "#tabTable"+x;
        tabHyperLink.innerHTML = "Hold "+x; 
        tabHyperLink.dataToggle = "tab"; //this doesn't work

lalit · Accepted Answer · 2021-06-04 09:07:35Z

2

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <script
            src="https://code.jquery.com/jquery-3.6.0.js"
            integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
            crossorigin="anonymous"
        ></script>
    </head>

    <body>
        <p></p>
    </body>
    <script type="text/javascript">
        var X = 1;
        var anchor = jQuery("p").append("<a></a>");

        $(anchor)
            .find("a")
            .attr({ href: "#tabTable" + X, "data-toggle": "tab" })
            .html("Hold" + X);
    </script>
</html>

answered Jun 4, 2021 at 9:07

lalit

913 bronze badges

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

Collectives™ on Stack Overflow

Set bootstrap data-toggle inside <a> tag dynamically through javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related