Jquey onclick event not working in SharePoint 2013

Question

I have added JSOM/js code using Content Editor to a SharePoint page. The js code is retrieving list items and binding it to a ul and divs. And the ul forms the jQuery tabs. But my problem here is tabs functionality is not working i.e li onclick event is not triggered at all. I am not sure what I am missing. Below code is just a skeleton of actual code.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){

ExecuteOrDelayUntilScriptLoaded(getItems, "sp.js");

function getItems() {
//Get list items and onSuccess bind to ul
}
    $("ul.tabs li").click(function(){  
        // Switch between tabs
    });
});
</script>

Update: Sorry for not providing full code here.Anyway when the getItems and switch tabs functions are separately been used they are working with no issues, and I already have them in other pages. but here in this page SharePoint is not loading click method. As some answers suggested, i have already tried on('click'... before posting question here.

Answer 1

Try the following click event code instead of above one.

//Dynamic element click event

$(document).on('click', 'ul.tabs li', function() {
    // Do something on an existent or future .dynamicElement
});

Hope this helps to you..

Answer 2

Don't know the exact reason why following code doesn't work sometime with SharePoint.

$("ul.tabs li").click(function(){  
   // Switch between tabs
});

But using the code as given follow always worked for me:

$("ul.tabs li").on('click',function(){  
   // Switch between tabs
});

Updates:

Based on your edited question, here I am sharing my approach how I got this worked in past.

Following is just a code snippet, its only to give you the basic idea. Your code may differ from mine.

$(document).ready(function () {
    ExecuteOrDelayUntilScriptLoaded(getItems, "sp.js");
});

function getItems() {

    getItemsFromList(function (data) {

        // Iterate here, When the iteration ends, bind the click events
        for (var i = 0; i < data.d.results.length; i++) {
            // Prepare the Tabs structure here

            // wait for the last item in data
            if (i == data.d.results.length - 1) {
                // Apend the tab struture to main div/element

                // Associate the click event here
                $("ul.tabs li").on('click', function () {
                    // Switch between tabs
                });
            }
        }
    },
        function (data) {
            console.log('Error');
        });
}

function getItemsFromList(success, failue) {
    $.ajax({
        url: "AJAX CALL URL",
        type: "GET",
        headers: { "Accept": "application/json; odata=verbose" },
        success: function (data) {
            success(data)
        },
        error: function (data) {
            failure(data)
        }
    });
}

Using this I got the working output. I made the same mistake, I was binding the event before the element get attached to DOM.

So I designed the code in above format, so first it will attach the element to DOM and later on it will bind the click event.

Let me know if you need any help in code.

Answer 3

Thank you all for your answers and help. With help of Ahmed Zia's comments I found solution to my problem. As the complete ul is getting formed dynamically, and the page is unable to find the click event later. So I changed my code like below so that the click event will be registered after the ul got created and bound to div (tabsContainerDiv_id) of a page

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){

ExecuteOrDelayUntilScriptLoaded(getItems, "sp.js");

function getItems() {
//Get list items and onSuccess bind to ul

registerEvents();
}

function registerEvents(){
    $('#tabsContainerDiv_id').on('click',' ul.tabs li', function(){  
        // Switch between tabs
    });
}
});
</script>

Answer 4

Please view if there is any error reported in console of developer tools after you click the tabs second time. Looks like getItems() is having some issue on second load or some required scripts are not loading Error message in console will surely help in narrowing the issue. Please post the error here if any.

Answer 5

Please refer this link

Maybe the classes which need to be added or removed may not be mentioned in CSS.

Answer 6

You may need to move your JS code to the bottom of the form. I found out the hard way in my own environment. Would work fine on one page and then when I would bring it into my actual form it wouldn't work. So I just moved my js source file instantiation below all of my SharePoint form fields. Hopefully this helps someone else having a similar issue.

Answer 7

Try using this:

function GetData() {
   RegisterTheEvent();
}

GetData();

function RegisterTheEvent() {
    var btnClicked = document.querySelector('#yourBtn");

    btnClicked.addEventListener("click", (e) => {
        console.log("It worked");
    }
}