如何檢測/選擇從JavaScript/JQuery創建的元素？

我想通過點擊從JS代碼創建的元素來創建元素Show-Hide。但由於某些原因，getElementById和getElementsByClassName無法選擇這些HTML元素。（請在演示：http://jsfiddle.net/vy09nnco/）如何檢測/選擇從JavaScript/JQuery創建的元素？

下面是HTML代碼：

<div id="toShow">Hello World!</div> 
<div id="container"></div>

創建<p>元素（這將被用來顯示隱藏）和appending到容器div：

var code = '<p class="click-me">Click Me!</p>'; 
$('#container').append(code);

下面是完整的jQuery代碼：

$(document).ready(function() {  
    var code = '<p class="click-me">Click Me!</p>';  
    var divToShow = document.getElementById('toShow'); 
    var clickMeDiv = document.getElementsByClassName('click-me'); // Here is the problem 
    var isOpenedClass = 'isOpened'; 
    var formIsClosed = true; 

    $(clickMeDiv).click(function() { 
     $(divToShow).toggleClass(isOpenedClass); 
     formIsClosed = false; 
    }); 
    $(clickMeDiv).click(function() { 
     if (formIsClosed) { 
      $(divToShow).removeClass(isOpenedClass); 
     } 
     formIsClosed = true; 
    })  
    $('#container').append(code);  
});

當我使用另一個元素來顯示隱藏時，它運行良好（例如：http://jsfiddle.net/vy09nnco/1/），這就是爲什麼它只是通過選擇創建的代碼。

感謝您的任何幫助。

來源

2014-12-25 csr-nontol

該元素還沒有在文檔中看到區別[here]（http://jsfiddle.net/vy09nnco/3/）。 – Wilmer

如果使用DOM對象而不是innerhtml來創建新元素，則可以直接引用元素，然後直接附加事件偵聽器。 – Jasen

您正在嘗試在DOM中存在對象之前添加偵聽器，只需將其追加，或者在append回調中創建偵聽器。 –

這是因爲您在頁面加載後創建元素，所以它不在DOM中，因此沒有附加到它的偵聽器。您可以添加一個事件偵聽器body（或父元素或某事），以尋找新創建的元素：

$("body").on("click", clickMeDiv, function() {

，而不是

$(clickMeDiv).click(function() {

FIDDLE

既然你反正使用jquery真的沒有理由使用vanilla Javascript。你可以做soemthing這樣少了很多代碼：

FIDDLE

來源

2014-12-25 21:19:36 jmore009

但爲什麼現在通過點擊顯示的div（'toShow'）它也隱藏它呢？ –

@CésarNontol更新了我的答案 – jmore009

它很好用！謝謝你的時間。請你能解釋一下關於'slideToggle（100）'嗎？以及如何識別div何時打開或關閉？ –

您需要設置您的點擊事件處理程序之前，該元素添加到DOM追加。請參閱下面的重新排序的JavaScript。

$(document).ready(function() {  
    var code = '<p class="click-me">Click Me!</p>';  
    var divToShow = document.getElementById('toShow'); 
    var clickMeDiv = document.getElementsByClassName('click-me'); // Here is the problem 
    var isOpenedClass = 'isOpened'; 
    var formIsClosed = true; 
    $('#container').append(code); //moved up this line 

    $(clickMeDiv).click(function() { 
     $(divToShow).toggleClass(isOpenedClass); 
     formIsClosed = false; 
    }); 
    $(clickMeDiv).click(function() { 
     if (formIsClosed) { 
      $(divToShow).removeClass(isOpenedClass); 
     } 
     formIsClosed = true; 
    });  
});

來源

2014-12-25 21:22:43 JRulle

謝謝！我知道了。問題在於功能的順序。 –

如何檢測/選擇從JavaScript/JQuery創建的元素？

回答

相關問題