1

ここでページが読み込まれた後にクリックしているのは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 を表示しようとしています。上記で私の推測を述べた何らかの理由で、それは機能していません。アンカー要素がクリックされたときに「クリックされました」というアラートを追加しましたが、応答がありません

4

1 に答える 1

3

イベントを動的要素に割り当てるには、イベント委任を使用する必要があります。jQuery のmethodaを使用して要素の非動的な祖先にクリック イベントを追加し、パラメーターとしてセレクターを渡します (この場合、ドキュメントの を使用しました)。on()abody

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

JSFiddle デモ。

が指定されている場合selector、イベント ハンドラーはdelegatedと呼ばれます。イベントがバインドされた要素で直接発生した場合、ハンドラーは呼び出されませんが、セレクターに一致する子孫 (内部要素) に対してのみ呼び出されます。jQuery は、イベント ターゲットからハンドラーがアタッチされている要素 (つまり、最も内側の要素から最も外側の要素) までイベントをバブルし、セレクターに一致するそのパスに沿ったすべての要素に対してハンドラーを実行します。

于 2013-10-24T21:46:44.270 に答える