Question

我得到了以下jQuery函数，这些函数在页面完全加载时加载：

$(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;
                });

使用此功能，我可以拖放对象，具有readmore功能等。这在页面加载时有效。在不同的情况下，我需要重新加载页面上的html对象，其中包含类＆＃34; draggable＆＃34;，＆＃34; droppable＆＃34;，＆＃34; td [contenteditable = true]＆＃34;，＆＃34;更＆＃34;和＆＃34; morelink＆＃34;。当我重新加载html对象时，jQuery函数不再适用于html对象。我已经尝试过$（）。on（），$（）。live（），$（）。ready（），$（）。bind（）

有没有人知道如何在新加载的html对象上绑定jQuery，而不会刷新整个页面？

非常感谢！

Answer 1

问题是事件侦听器附加到它自己的元素，如果删除该元素，事件也将被删除。

在类似的情况下，我通常附加一个事件监听器自己做文档，然后我做一些案例来处理不同的目标，

类似的东西：

document.addEventListener("drag", function(ev){
  var objClass = ev.target.className;

  switch(objClass) {
     case ".draggable":
     // my code goes here...
     break;
  }
});

最好的问候。

再次加载html对象后加载jQuery函数

1 个答案: