4

フォーム送信ボタンがクリックされたときに関数を呼び出そうとしています。ページが更新されないはずです。AJAXを介してカテゴリを追加したいと思います。

問題は、htmlファイルに手動で追加するとすべてが正常に機能することですが、を介してjavascript関数に追加しようとするとappendTo、クリック関数が呼び出されません。ここでの問題は何ですか？

Javascript：

$(".addCategoryBtn").click(function() {  
       console.log('add category clicked');
    });

JavaScript関数の一部：

html += '<br><br><form id="addCategory_form" action=""><input type="text" class="inptCategoryName" placeholder="Kategorie Name">&nbsp;<input type="text" class="inptHtmlColor" placeholder="Hintergrund: #000FFF">&nbsp;<input type="text" class="inptTextColor" placeholder="Text: #000FFF"><input type="button" value="Go" class="addCategoryBtn"></form></div>';

$(html).appendTo($('body'));
4

2 に答える 2

4

動的コンテンツの場合、jquery 1.7以降を使用するときは、on（）を使用します。

$("body").on('click','.addCategoryBtn',function() {  
    console.log('add category clicked');
});

1.4.3を含むjQuery1.6.x以下の場合、delegate（）を使用します。

$("body").delegate('.addCategoryBtn', 'click', function() {  
   console.log('add category clicked');
});

jQuery 1.4.2以下の場合、追加後にバインドを使用します。

html += '<br><br><form id="addCategory_form" action=""><input type="text" class="inptCategoryName" placeholder="Kategorie Name">&nbsp;<input type="text" class="inptHtmlColor" placeholder="Hintergrund: #000FFF">&nbsp;<input type="text" class="inptTextColor" placeholder="Text: #000FFF"><input type="button" value="Go" class="addCategoryBtn"></form></div>';

$(html).appendTo($('body'));

$(".addCategoryBtn").bind("click", function() {  
    console.log('add category clicked');
});

とにかく、あなたが何をするにしても、live（）を避けるようにしてください

于 2013-01-29T17:41:31.723 に答える
3

動的コンテンツイベントは関数を使用してバインドする必要があるためon：

$("body").on('click','.addCategoryBtn',function() {  
       console.log('add category clicked');
});
于 2013-01-29T17:35:59.163 に答える