javascript函數onclick與新元素

我在一個網站上工作，我有一個JS問題。javascript函數onclick與新元素

我恢復情況：

我做了一個動態的形式與一些標籤
我可以切換標籤用JS點擊功能
當我點擊「+」選項卡上。它會創建一個新選項卡（<ul>上的新<li>，以及主div上的新<div>）
但是，當我想要新建創建的新選項卡時，點擊功能不會回答。

我在click函數的第一行放了一個console.log，沒有日誌輸出。

點擊功能適用於靜態內容，但新鮮內容不起作用。

如何使它適用於動態內容？

http://jsfiddle.net/npx2mes2/

來源

2015-10-07 oxmolol

的可能的複製[點擊事件不起作用上動態地生成的元素]（http://stackoverflow.com/questions/6658752/click-event-doesnt-work-on-動態生成元素） – Chris

請分享代碼，或者更好地創建一個[jsfiddle]（https：// jsfiddle。net） – arcyqwerty

jsfiddle on編輯 – oxmolol

http://jsfiddle.net/npx2mes2/1/

$("#tabs_menu_n1").on('click', 'a', function(e)

問題是在註冊時，你應該把它安裝到母公司，然後再對每一個孩子。

來源

2015-10-07 18:00:37

請注意，我已將.tabs_menu_n1更改爲＃tabs_menu_n1，沒有任何實際原因..只要有可能，請儘量使用Id。 –

變化線$(".tabs_menu_n1 a").click(function(e) {到$(document).on('click', ".tabs_menu_n1 a", function (e) {

Demo

闡釋。

當元素被動態添加到DOM時，每次添加元素時都必須註冊該事件。因此，而不是做這個過程中，每次簡單地註冊像下面的事件，所以你不想註冊來回事件動態創建的元素

$(document).on('click', ".selector", function (e) {));

現在我可以動態地添加與selector類元素，並能處理點擊事件每次添加元素時都不註冊點擊事件的元素。

注意：您可以代替文件

來源

2015-10-07 18:01:42

演示不工作..只爲你知道 –

sry發佈了錯誤的fiddle.updated演示 –

有點簡化樣品使用父母沒有選擇的jQuery。
但想法一樣：添加點擊處理程序到ul並檢查裏面點擊a標記。

var x = 2; 
 
var original = document.getElementById('H1_n1'); 
 

 
function a(content, href) { 
 
    var link = document.createElement("a"); 
 
    link.textContent = content; 
 
    link.setAttribute('href', href); 
 
    return link; 
 
} 
 

 
function li_a(id, content, href) { 
 
    var listItem = document.createElement("li"); 
 
    listItem.setAttribute('id', id); 
 
    listItem.appendChild(a(content, href)); 
 
    return listItem; 
 
} 
 

 
function div(id, textContent) { 
 
    var d = document.createElement("div"); 
 
    d.setAttribute('class', 'tab_content_n1') 
 
    d.setAttribute('id', id) 
 
    d.textContent = textContent; 
 
    return d; 
 
} 
 

 
function add_rec() { 
 
    var i = x++; 
 
    var mdiv = document.getElementById("tab_n1"); 
 
    mdiv.appendChild(div('H1_n' + i, '\nHello world from n' + i + '.\n')); 
 

 
    pbtn = document.getElementById('pbtn'); 
 
    var ul = document.getElementById("tabs_menu_n1"); 
 
    ul.insertBefore(li_a("hn" + i, "H" + i, "#H1_n" + i), pbtn); 
 
} 
 

 

 
document.getElementById('tabs_menu_n1').addEventListener('click', function(e) { 
 
    var el = e.target; 
 

 
    if (el.nodeName !== 'A') return; 
 

 
    if (el.hash == "#+") add_rec(); 
 
    else { 
 
    e.preventDefault(); 
 
    var current = document.querySelectorAll("#tabs_menu_n1 .current, #tab_n1 .current"); 
 
    for (var i = 0, len = current.length; i < len; i++) { 
 
     current[i].classList.remove('current'); 
 
    } 
 

 
    el.classList.add('current'); 
 
    document.querySelector(el.hash).classList.add('current'); 
 
    } 
 
}, false);

.tab_content_n1 { 
 
    display: none; 
 
} 
 
.tab_content_n1.current { 
 
    display: block; 
 
    animation: fadeIn 1s; 
 
} 
 
a.current { 
 
    color: red; 
 
} 
 
@keyframes fadeIn { 
 
    from { 
 
    opacity: 0; 
 
    } 
 
    to { 
 
    opacity: 1; 
 
    } 
 
}

<div class="tab_space"> 
 
    <ul id="tabs_menu_n1" class="nav nav-tabs tabs_menu_n1 tab_body"> 
 
    <li><a class="current" href="#M_n1">mai</a> 
 
    </li> 
 
    <li><a href="#R_n1">red</a> 
 
    </li> 
 
    <li id="hn1"><a href="#H1_n1">hor</a> 
 
    </li> 
 
    <li id="pbtn"><a href="#+">+</a> 
 
    </li> 
 
    </ul> 
 
</div> 
 
<div id="tab_n1" class="tab_n1"> 
 
    <div class="tab_content_n1 current" id="M_n1">mai</div> 
 
    <div class="tab_content_n1" id="R_n1">red</div> 
 
    <div class="tab_content_n1" id="H1_n1">hor</div> 
 
</div>

來源

2015-10-07 19:19:15 Grundy

javascript函數onclick與新元素

回答

相關問題