Question

我绑定一个事件如下：当用户在菜单上单击鼠标时，它会在一个dragbox中加载一个视图，该拖动框是可拖动的。

但是，它不起作用..我试图点击两次，第一次，拖动框显示，但不可拖动，第二次出现一个新的框，并作为我工作，除了..

我真的不明白为什么......

var box = [];
var $container = $("#container");

/** DragBox Init */

function DragBox(url, controller) {
this.url = url;
this.htmlcontent = "";
this.controller = controller;
this.test = "null";

this.requestContent = function() { 
    $.get(this.url, null, function(res) {
        $container.append(res);
    });
}

this.requestContent();
$(this).attr("id", this.controller);
$("#" + this.controller).hide().fadeIn(1000).draggable();
}

/ **链接抓取器* /

var links = $("li a");
for(var i = 0; i < links.length; i++) {
links[i].onclick = function() {
    box.push(new DragBox($(this).attr("href"), $(this).attr("controller")));
    return false;
}
}

Answer 1

尝试使用

$('li a').click(function(e){ e.preventDefault(); DragBox($(this).attr("href"), $(this).attr("controller")); })

这将绑定点击事件，您不需要使用for循环

尝试使用jquery-ui使它们可拖动 Jquery-ui draggable

Answer 2

$(document).on('click', 'li a', function(e) {
    if ( /* some condition */ ) {
        var some_var = new DragBox(params);
    }
});

Answer 3

在requestContent调用期间，您要拖动的框是否应附加到DOM？

如果是这样，我认为问题是你在加载之前试图拖动它，这就是为什么它只能第二次工作（因为至少第一次加载了）。 / p>

无论如何，问题是requestContent是异步的，因为它调用了服务器，所以你应该等到它完成之后再做，这可以通过在该函数告诉你时执行你的代码来实现你可以通过调用所谓的回调来实现：

function DragBox(url) {
  // init stuff...

  this.requestContent = function(callback) { 
    $.get(url, function(res) {
      var $element = $(res);
      $element.appendTo($container);
      $element.hide();
      // The job is done, execute the code inside callback
      callback($element);
    });
  }

  // Render the requested html content and make it draggable
  this.requestContent(function($element) {
    $element.fadeIn(1000).draggable();
  });

}

jQuery事件第二次发生

3 个答案: