JQuery不會識別創建的元素

Question

我無法讓jquery識別從窗體更改創建的元素。我已經設置了，所以當我選擇一個鏈接創建的時候，但是當我添加一個點擊功能到創建的項目時，什麼都不會發生。我怎樣才能做這項工作？

$(function() { 

var i = $('#nav li').size() + 1; 

$('a#add').click(function() { 
    $('<li>' + i + '<a href="#" id="add">yes</a></li>').appendTo('ul'); 
    i++; 
}); 

$('a#remove').click(function() { 
    $('li:last').remove(); 
    i--; 
}); 


}); 

HTML代碼

<ul id="nav"> 
<li>1</li> 
<li>2</li> 
<li>3</li> 
<li>4</li> 
</ul> 
<a href="#" id="add">Add List Item</a><br/> 
<a href="#" id="remove">Remove LI</a> 

Answer 1

您需要使用live來爲動態創建的元素綁定事件處理程序。 你當前的代碼將創建多個具有相同ID的html元素，這是無效的。 您可以使用類名來標識src元素。

試試這個：

$(function() { 
    var i = $('#nav li').size() + 1; 
    $('a.add').live("click", function() { 
     $('<li>' + i + '<a href="#" class="add">yes</a></li>').appendTo('ul'); 
     i++; 
    }); 

    $('a.remove').live("click", function() { 
     $('li:last').remove(); 
     i--; 
    }); 
}); 

HTML代碼

<ul id="nav"> 
      <li>1</li> 
      <li>2</li> 
      <li>3</li> 
      <li>4</li> 
</ul> 
<a href="#" class="add">Add List Item</a><br/> 
<a href="#" class="remove">Remove LI</a> 

Answer 2

更改您的jquery這樣：

$(function() { 
    var i = $('#nav li').size() + 1; 

    $('a#add').live('click', function() { 
     $('<li>' + i + '<a href="#" id="add">yes</a></li>').appendTo('ul'); 
     i++; 
    }); 

    $('a#remove').live('click', function() { 
     $('li:last').remove(); 
     i--; 
    }); 
}); 

Answer 3

你不能在這裏使用。點擊。 .click僅與鼠標事件動作綁定。您必須使用.live

Answer 4

要將事件附加到一個選擇和所有其他的jQuery創建的，則必須使用.live（）函數代替。點擊（）速記。

你的代碼的「點擊」事件附加到你「一個＃添加」鏈接是這樣的：

$('a#add').live('click', function() { 
    $('<li>' + i + '<a href="#" id="add">yes</a></li>').appendTo('ul'); 
    i++; 
}); 

Answer 5

id="add"只允許每頁一個元素。如果你多次使用它，奇怪的事情會發生。將您的代碼更改爲：

$(function() { 
    var i = $('#nav li').size() + 1; 

    $('a#add').click(function() { 
     $('<li>' + i + '<a href="#" class="add">yes</a></li>').appendTo('ul'); 
     i++; 
    }); 

    $('ul a.add').live('click', function() { 
     // handle any link with class "add" that was dynamically added to the ul 
    }); 

    $('a#remove').live('click', function() { 
     $('li:last').remove(); 
     i--; 
    }); 
});