附加列表项的jQuery单击事件问题

Question

我在点击事件时遇到了一些问题，我猜这是因为在页面加载后我点击的是 jquery 和 jsfiddle

http://jsfiddle.net/PTHsY/

$(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 将事件分配给动态元素。使用jQuery's on() method 将点击事件添加到a 元素的非动态祖先，将a 选择器作为参数传入（在这种情况下，我使用了文档的body）：

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

JSFiddle Demo.

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