load jQuery functions after html objects loaded again

Question

i got the following jQuery functions that are loaded when the page is fully loaded:

$(window).load(function() {
            setTimeout(function(){

                $('.draggable').draggable({
                    cursor: "move",
                    revert: "invalid",
                    opacity: 0.7,
                    snap: ".droppable",
                    snapMode: "inner"
                });

                $('.droppable').droppable({
                  accept: ".draggable",
                  hoverClass: 'hovered',
                  drop: positioning
                });

                $('.droppableDelete').droppable({
                    accept: ".draggable",
                    hoverClass: 'hovered',
                    drop: deleteTicket
                });

                $("td[contenteditable=true]").blur(function() {
                    var itemId = $(this).attr("id");
                    var itemIdTrimmed;
                    itemIdTrimmed = itemId.substr(8);
                    var currentPhaseName = $(this).text();
                    var oldPhaseName;
                    var ScrumBoardPhasen = new Array();

                    var clientContext = SP.ClientContext.get_current()
                    var oListScrumBoard = clientContext.get_web().get_lists().getByTitle('Scrum Board Phasen');
                    var camlQuery2 = new SP.CamlQuery();

                    camlQuery2.set_viewXml('<View><Query><Where><Geq><FieldRef Name=\'ID\'/>' + '<Value Type=\'Number\'>1</Value></Geq></Where></Query></View>');
                    var collListItem3 = oListScrumBoard.getItems(camlQuery2);
                    clientContext.load(collListItem3);
                    clientContext.executeQueryAsync(Function.createDelegate(this, function() {

                        // Zusammenbauen des Arrays für die Phasen überprüfung
                        var listItemEnumerator2 = collListItem3.getEnumerator();
                        while (listItemEnumerator2.moveNext()) {
                            oListItem2 = listItemEnumerator2.get_current();
                            ScrumBoardPhasen[oListItem2.get_id()] = oListItem2.get_item('Title');
                        }
                        oldPhaseName = ScrumBoardPhasen[itemIdTrimmed];
                        console.log(itemId);
                        console.log(itemIdTrimmed);
                        console.log(currentPhaseName);
                        console.log(oldPhaseName);
                        updateItemBoardPhasen(currentPhaseName, itemId);
                        updateTicketPhasen(currentPhaseName, oldPhaseName);

                    }), Function.createDelegate(this, function() {

                }));

                });

                var showChar = 100;
                var ellipsestext = "...";
                var moretext = "<img src='http://sp13-dev-master/sites/scrumtest/Style%20Library/Icons/Circled%20Right%202-15.png'>";
                var lesstext = "<img src='http://sp13-dev-master/sites/scrumtest/Style%20Library/Icons/Circled%20Left%202-15.png'>";
                $('.more').each(function() {
                    var content = $(this).html();

                    if(content.length > showChar) {

                        var c = content.substr(0, showChar);
                        var h = content.substr(showChar-1, content.length - showChar);

                        var html = c + '<span class="moreellipses">' + ellipsestext+ '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';

                        $(this).html(html);
                    }

                });

                $(".morelink").click(function(){
                    if($(this).hasClass("less")) {
                        $(this).removeClass("less");
                        $(this).html(moretext);
                    } else {
                        $(this).addClass("less");
                        $(this).html(lesstext);
                    }
                    $(this).parent().prev().toggle();
                    $(this).prev().toggle();
                    return false;
                });

With this functions i can drag and drop objects, have readmore functions, etc. This works when the page is loaded. In diffrent situations i need to reload the html objects on the page that have the class "draggable", "droppable", "td[contenteditable=true]", "more" and "morelink". When i reload the html objects the jQuery functions are not working anymore on the html objects. i already tryed $().on(), $().live(), $().ready(), $().bind()

Does anyone know how i can bind the jQuery on the new loaded html objects, without freshing the whole page?

Many Thanks!

Have you tried deleting setTimeout()? It will only repeat once. w3schools.com/jsref/met_win_settimeout.asp — Jose Serodio
– Jose Serodio, Commented Apr 22, 2016 at 12:48

LeandroP · Accepted Answer · 2020-11-13 17:10:06Z

1

The problem is that the event listeners are attached to the element it self, if that element are removed, the event will be removed too.

On cases like that i usually attach a single event listener do the document it self and then i make some cases to handle different targets,

something like this:

document.addEventListener("drag", function(ev){
  var objClass = ev.target.className;
  
  switch(objClass) {
     case "draggable":
     // my code goes here...
     break;
  }
});

best regards.

edited Nov 13, 2020 at 17:10

answered Apr 22, 2016 at 13:52

LeandroP

3873 silver badges8 bronze badges

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

Collectives™ on Stack Overflow

load jQuery functions after html objects loaded again

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