1

以下问题：我有一个名为“#window-hidden”的隐藏 div 容器。当用户点击一个链接时，链接文档的 HTML 应该通过 AJAX 插入到这个 div 容器中（到目前为止工作“。这个容器也应该是可拖动的（到目前为止工作）。但另外我需要一个关闭按钮来再次隐藏这个 div 容器 - 这里出现了麻烦。

我的代码：

$('.top_navigation .address a').click(function() {
  var myUrl = SOME CODE TO GET THE URL - WORKING;
  $('#window-hidden').load(myUrl, function() {
    var closer = '<div id="closer"><a href="#">X</a></div>';
    $(this).prepend(closer);
    $(this).fadeIn();
    });
  return false;
});

$('#window-hidden').draggable();

$('#closer a').on('click', function() {
  $('#window-hidden').fadeOut();

});

代码的第一块将 HTML 加载到 div 容器中，并将“closer”元素添加到容器中。到目前为止一切都很好。第二个块使容器可拖动。最后一段代码我想再次关闭窗口，但它不起作用。也许是因为父容器（#window-hidden）是可拖动的？或者可能是因为 #closer 元素是在构建 DOM 之后插入的？？

最好的，托拜厄斯

4

3 回答 3

2

click事件仅适用于文档就绪的 DOM 中存在的元素。您需要使用on（如果您使用 jQuery 1.7+）或delegate（对于早期的 jQuery 版本）来实现您所需要的。根据您的版本尝试以下任何一种：

on：

$("#window-hidden").on("click", "#closer a", function () {
    $('#window-hidden').fadeOut();
});


delegate：

$("#window-hidden").delegate("#closer a", "click", function () {
    $('#window-hidden').fadeOut();
});
于 2013-02-26T09:15:27.200 回答
0

要监听页面加载后插入的 dom 元素上的事件，您需要使用 on 方法。在这种情况下，它将类似于：

$('#window-hidden').on('click', '#closer a', function() {
    $('#window-hidden').fadeOut();
});

有关详细信息，请参阅：http ://api.jquery.com/on/

于 2013-02-26T09:18:12.523 回答
0

我想问题是这里的代码

$('#closer a').on('click', function() {
  $('#window-hidden').fadeOut();

});

在页面加载时执行，但在单击链接时将“更近”的 div 插入到 DOM 中。因此，当您尝试将单击处理程序附加到“更接近”的 div 时，它还不存在。您可以尝试将附加的事件处理程序放入单击处理程序中吗？只是复制东西，它看起来像这样：

$('.top_navigation .address a').click(function() {
  var myUrl = SOME CODE TO GET THE URL - WORKING;
  $('#window-hidden').load(myUrl, function() {
    var closer = '<div id="closer"><a href="#">X</a></div>';
    $(this).prepend(closer);

    $('#closer a').on('click', function() {
        $('#window-hidden').fadeOut();
    });

    $(this).fadeIn();
    });
  return false;
});

$('#window-hidden').draggable();

干杯，亚历克斯

于 2013-02-26T09:18:25.610 回答