Question

我遇到了点击事件的一些问题我正在猜测正在发生，因为我点击的内容是在页面加载后附加的是jquery和jsfiddle

$(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。出于某些原因，我在上面说过我的猜测它不起作用。我添加了一个警告＆＃34;点击了＆＃34;当点击任何锚元素但我没有负责任时

Answer 1

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

body

<强> JSFiddle Demo

提供$('body').on('click', 'a', function(e){ ... });时，事件处理程序称为委派。当事件直接发生在绑定元素上时，不会调用处理程序，但仅适用于与选择器匹配的后代（内部元素）。 jQuery将事件从事件目标起泡到附加处理程序的元素（即最里面到最外层的元素），并为该路径上与选择器匹配的任何元素运行处理程序。

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

1 个答案: