jQuery的具有附加列表项

Question

我有哪些即时猜测是发生点击事件的一些问题，因为什么，我点击这里在页面加载后得到追加是jQuery和的jsfiddle

http://jsfiddle.net/PTHsY/

click事件问题

$(document).ready(function(){ 

// Adding a project 
$('.project-btn').click(function(e){ 
    e.preventDefault(); 

    //grab the user input for the new project 
    var project = $('.project-val').val(); 

    //Add the project to the list 
    $('<li></li>').addClass(project).appendTo('.project-list'); 
    $('<a></a>').attr("href",project).text(project).appendTo('li.'+project); 

    // create the div where the categories will go 
    $('<div></div>').attr("id",project).appendTo('.category-wrapper'); 
    // hide the div untill it is called upon 
    $('div#'+project).fadeOut(function(){ 
     $('<h1></h1>').text(project).css("text-align","center").appendTo('div#'+project); 
     // add the input for the category div 
     $('<input>').attr("type","text").addClass('category-val').appendTo('div#'+project); 
     $('<input>').attr("type","submit").attr("value","Add Category").addClass("category-btn-"+project).appendTo('div#'+project); 
     // add the ul 
     $('<ul></ul>').attr("class","category-list").appendTo('div#'+project); 
     // add the back button 
     $('<p></p>').text("back").addClass('category-back').css("cursor","pointer").appendTo('div#'+project); 
    }); 

    // clear the input search 
    $('.project-val').val(''); 

}); 

$('a').click(function(e){ 
    e.preventDefault(); 
    selectedDiv = $(this).attr("href"); 
    alert("clicked"); 
    $('.project-wrapper').fadeOut(function(){ 
     $('div#'+selectedDiv).fadeIn(); 
    }); 
}); 
}); 

我想显示隐藏的div只有当我点击添加列表项。由于某种原因，我说我的猜测以上它不起作用。我添加了一个“单击”警报，以便单击任何锚点元素时，但我无法做出响应

Answer 1

您需要使用event delegation将事件分配给动态元素。 click事件添加到使用jQuery's on() method您a元素的非动态的祖先，在a选择作为参数传递（在这种情况下，我使用文档的body）：

$('body').on('click', 'a', function(e){ 
    ... 
}); 

JSFiddle Demo。

当提供selector，事件处理程序被称为委派。当事件直接发生在绑定元素上时，不会调用该处理程序，而只会为与选择器匹配的后代（内部元素）调用该处理程序。 jQuery将事件从事件目标引发到处理程序所附的元素（即，最内层到最外层的元素），并沿着匹配选择器的路径上的任何元素运行处理程序。