jQuery追加html5

Question

我有一個標簽<a href="">矩陣，由JQuery的此代碼生成：

function makeList(){
    var listContainer = $("#matrix");
    for(i=0; i<10; ++i){
        listContainer.append( $("<nav><ul> <li><a href="">v1</li> 
            <li><a href="">v2</li> <li><a href="">v3</li> 
            <li><a href="">v4</li>"));
        console.log("adding...");
    } 
}

現在，我有40個<a href="">鏈接，並且用戶單擊其中之一。 我需要訪問此<a href="">並對其進行處理。

我該怎么做？ 謝謝

Answer 1

隨着元素的追加，最初DOM將沒有元素。 在事件處理程序上使用。

句法：

.on('event', 'selector', fn);

加上使用“ this ”關鍵字，您可以獲取剛剛單擊的元素。

 $("a").on("click",function(){
    console.log($(this).html());
 });

在下面的小提琴中添加了必需的元素並添加了事件處理程序。

Answer 2

您的問題對我來說不是很清楚。
如果要確定單擊了哪個，則以下代碼段可能會對您有所幫助。

 $("a").on("click",function(){ alert($(this).html()); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> <a href="#">Link 4</a> 

Answer 3

嘗試將類添加到<a>標記中，並將添加的類用作click事件的選擇器，然后使用this指針/引用訪問clicked標記。

參見以下示例-

<a class="test" href="#">Test 1</a>
<a class="test" href="#">Test 2</a>
<a class="test" href="#">Test 3</a>
<a class="test" href="#">Test 4</a>

$('.test').on('click',function(){
alert($(this).text());
});

工作小提琴-http: //jsfiddle.net/pp8b7aec/

Answer 4

動態添加元素時，您需要使用事件委托語法，因為頁面加載時它們不在dom中，因此不會注冊動態元素上的任何事件。

語法為：

$(staticParent).on('event', 'selector', fn);

因此，您可以執行以下操作：

$(function(){
    $("#matrix").on('click', 'nav a', function(e){ // register the event on static parent
        e.preventDefault();// stops the link to navigate
        alert(this.textContent); // alert the text written in the clicked link.
    });
});

在上面的代碼中，您甚至可以委托給$("#matrix"), $("body") or $(document) 。