-1

私のjQueryコード:

var menu = 0;
var link = "";
var column = 2;

jQuery( document ).ready( function($) {
$('body').css('height', $(window).height());
$('body').css('width', 32 + (230*column));

$(".button").click(function(event) {
    event.preventDefault();
    link = $(this).find('a').attr("href");

    $("#menu").css({'left':event.pageX});
    $("#menu").css({'top':event.pageY});
    $("#menu").find('#gotosite').attr("href", link);
    $("#menu").slideDown();
    menu = 1;
});

$("#zamknij_menu").click(function(event) {
    event.preventDefault();
    $("#menu").slideUp();
    menu = 0;
});

$("#zbadaj_element").click(function(event) {
    event.preventDefault();
    $("#menu").slideUp();
    menu = 0;
    $("body").append("<div class=\"column\" id=\"" + column + "\">");
    $("#" + column).html('<img src="load.gif" alt="Please Wait" /><p>Loading... Please Wait</p>');
    $("#" + column).load("robotone.php?url=" + link);

    column++;
    $("body").append("</div>");
    $('body').css('width', 32 + (230*column));
});

$("#openhelp").click(function(event) {
    $("#legend").slideToggle('slow', function() {
    // Animation complete.
  });
});
});

このスクリプトは、ボディにクラス列を含む div を追加し、php ファイルにロードします。このスクリプトは html ドキュメントでは適切に機能しますが、このスクリプトによって追加された新しい列では機能しません。手伝って頂けますか？

4

4 に答える 4

2

イベントをバインドした後で新しい HTML 要素を DOM に追加しても、それらの新しい要素はバインドされません。 jQuery.on関数は、これに対処するように設計されています。少し異なる方法で動作します。

DOM 内のイベントは、親要素に「バブルアップ」します (コード内で明示的にそうしないように指示されている場合を除きます)。したがって、要素を「クリック」すると、その親要素、その要素の親なども「クリック」し、body要素まで、そして最終的にはdocument. したがって、これらの親要素にバインドして、クリックに応答することもできます。

関数はまさにそれ.onを行い、特定のセレクターからのその親要素に発生したイベントにのみ応答するフィルターを含みます。したがって、子要素自体にバインドする代わりに、共通の親にバインドできます。 bodyまたはdocument、この目的でよく使用されます。このようなもの：

$(document).on('click', '.button', function () {
    // your event handling code
});

これは のクリック イベントにバインドされますがdocument、イベントの発信元が クラス である場合にのみ、そのイベントに応答しbuttonます。最終結果は、 class の要素のクリック イベントにバインドした場合と同じですが、内部buttonで 2 つの明確な違いがあります。

  1. class のすべての要素に対して 1 つのイベントを作成するのではなく、DOM で1 つのイベントのみを作成しますbutton。多くの要素がある場合、これによりパフォーマンスが向上します。
  2. このイベントがバインドされた後buttonに DOM に追加されたクラスの要素は、引き続き影響を受けます。それらが共通の親の子である限り (この場合、すべてが の子です)、そのイベントはその親に「バブルアップ」します。これは、「遅延イベント」と呼ばれることがよくあります。基本的に、必要なすべての要素を追加でき、それらは引き続き応答されます。document
于 2013-06-15T11:14:13.273 に答える
1

たとえば、すべてのイベントに「on」を追加する必要があります。

$(".button").on('click',function(event) {
    // code
});

この道をたどって

于 2013-06-15T11:07:01.210 に答える
0

$(selector).click(...)すでに存在するdomElementsにのみclickHandler$(selector).on('click', function(){...});を追加します。後で挿入される要素にもハンドラーを追加するために使用する必要があります...

于 2013-06-15T11:08:28.803 に答える