jQuery：使用.prepend（）將HTML插入到可拖動div中 - 如何在此HTML元素上使用click事件？

以下問題：我有一個隱藏的div容器，名爲「＃window-hidden」。當用戶點擊一個鏈接時，鏈接文檔的HTML應該通過AJAX插入到這個div容器中（到目前爲止，「這個容器應該是可拖動的（到目前爲止）」。但是另外我需要一個關閉按鈕來再次隱藏這個div容器 - 在這裏出現的麻煩jQuery：使用.prepend（）將HTML插入到可拖動div中 - 如何在此HTML元素上使用click事件？

我的代碼：

$('.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容器以及它添加了「更緊密」的元素融入第二個塊使得容器可以拖動，而最後一塊代碼我想再次關閉窗口，但是它不起作用，也許這是因爲父容器（＃window-hidden）是draggab樂？或者，也許是因爲在構建DOM之後插入了元素#closer？

最佳，托比亞斯

來源

2013-02-26 Tobias Krause

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-26 09:15:27 mattytommo

謝謝 - 我試了好幾次以不同的方式使用。對（），但沒有得到正確的語法。非常感謝你！ – 2013-02-26 10:23:58

@TobiasKirsch沒問題，很高興我可以幫忙！ :)。如果這是您的問題的答案，請點擊旁邊的勾號並將其標記爲正確:)。 – mattytommo 2013-02-26 10:27:01

要監聽頁面加載後插在DOM元素事件，你需要使用on方法。在這種情況下，它會是這樣的：

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

欲瞭解更多信息，請參見：http://api.jquery.com/on/

來源

2013-02-26 09:18:12 mockaroodev

我想這個問題是，這裏

$('#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-26 09:18:25

這也適用！謝謝！ – 2013-02-26 10:24:57

jQuery：使用.prepend（）將HTML插入到可拖動div中 - 如何在此HTML元素上使用click事件？

回答

相關問題