通过 AJAX CAll 加载内容后,jQuery draggable 不起作用

jQuery draggable doesn't work after content is loaded via AJAX CAll

提问人:Durraiz Azam 提问时间:1/22/2022 最后编辑:Durraiz Azam 更新时间:1/22/2022 访问量:61

问:

我正在尝试拖动我用 Ng-Repeat 填充数据的卡片,但 Jquery 无法处理动态数据。忽略其余的 ajax 调用,它们都很好,只是帮助在 div.card 标签上实现 jQuery。 这是代码

<div class="card Bugg" id="hi" ng-repeat="bug in data">
    <p><b>Bug ID:</b></p>
    <p id="bugid"> {{bug.Bugid}}</p>
    <p><b>Bug Summary:</b></p>
    <p> {{bug.summary}}</p>
       <div id="bugButtons">
            <button id="buttonTask" type="button" class="btn btn-success">View</button>
                <div id="profileCircle"></div>
        </div>
 </div>
 <div class="card Bugg" id="hi">
    <p><b>Bug ID:</b></p> <p id="bugid">123</p>
    <p><b>Bug Summary:</b></p> 
    <p>OpenPGP should avoid weak crypto algorithms where possible (SHA-1, TRIPLEDES)</p>
    <div id="bugButtons">
      <button id="buttonTask" type="button" class="btn btn-success">View</button>
      <div id="profileCircle"></div>
    </div>
  </div>

这是 Jquery

 $(document).ready(function () {
        //  $(".card").on( click,addListeners);
        function addListeners() {
          $(".card").draggable({
            revert: "invalid",
            start: function () {
              $(this).addClass("selected");
            },
            stop: function () {
              $(this).removeClass("selected");
              if ($(this).parent().parent().prop('id') == "developerscard") {
                if ($(this).hasClass("Bugg")) {
                  $(this).parent().parent().append("hahahahah");
                  $(this).parent().parent().append($(this).find("#bugid").text());
                  $(this).addClass("Devo");
                  $(this).removeClass("Bugg");
                }
              }
              //for from dev to bug
              if ($(this).parent().parent().prop('id') == "bugcard") {
                if ($(this).hasClass("Devo")) {
                  $(this).parent().parent().append("bug big bug");
                  $(this).addClass("Bugg");
                  $(this).removeClass("Devo");

                }
              }
              //for bug old new location identification
            }
          });
          $(".column").droppable({
            accept: ".card",
            drop: function (event, ui) {
              ui.draggable
                .css("left", "0")
                .css("top", "0")
                .appendTo($(this).find(".cards"))
            }
          });
        }
        addListeners();
      });
jquery angularjs ajax jquery-ui-draggable

评论

0赞 Twisty 1/22/2022
欢迎使用 Stack Overflow。最好参加导览: stackoverflow.com/Tour 您的代码没有提供最小的可重现示例: stackoverflow.com/help/minimal-reproducible-example 根据您提供的内容,我怀疑动态生成的内容尚未初始化为 Draggable。

答: 暂无答案