JQuery не работает на странице загружается AJAX

Question

Мой 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. 
    }); 
}); 
}); 

Этот сценарий Append DIV с классом столбца тела и загрузить в нее PHP файл. Этот скрипт корректно работает с html-документом, но не работает для новых столбцов, которые были добавлены этим скриптом. Вы можете мне помочь?

Answer 1

Sices добавляются динамически Event Delegation.

Пример:

$(document).on("eventname",'.selector', function(event,ele){ 
//Your code goes here 
}); 

http://api.jquery.com/on/

Answer 2

Вам нужно добавить «на» в каждом случае говорят, напр.,

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

Следуйте таким образом

Answer 3

$(selector).click(...) присоединяет clickHandler только к domElements, уже существующее место, вы должны использовать $(selector).on('click', function(){...}); для добавления обработчика также к элементам, которые будут вставлены позже ...

Answer 4

При добавлении новых HTML-элементов в DOM после того как вы связаны ваши события, эти новые элементы не будут связаны. The jQuery .on function предназначен для решения этой проблемы. Он работает несколько иначе.

События в DOM «пузырятся» до их родительских элементов (если явно не указано в коде, который, как представляется, не выполняется). Таким образом, когда вы «нажимаете» на элемент, вы также «нажимаете» его родительский элемент, родитель этого элемента и т. Д., Вплоть до элемента body и, в конечном счете, document. Таким образом, вы также можете привязать эти родительские элементы к клику.

Функция .on делает именно это и включает фильтр, который реагирует только на события, связанные с этим родительским элементом, которые относятся к определенному селектору. Таким образом, вместо привязки к самому дочернему элементу вы можете привязываться к общему родителю. body или document часто используются для этой цели. Что-то вроде этого:

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

Это связывается с храповым случае document, но только в ответ на это событие, если инициатор мероприятия был класс button. Конечный результат такого же, как если вы привязаны к событию нажатия элементов класса button, но с двумя различными различиями под капотом:

1. Вы только создать один событие на DOM, вместо одного для каждого элемента класса button. Если у вас много элементов, это приводит к повышению производительности.
2. Любые элементы класса button, добавленные в DOM после, связаны этим событием. До тех пор, пока они являются дочерью общего родителя (в этом случае они все, это ребенок от document), то их событие все равно будет «пузыриться» с этим родителем. Это часто называют «отложенными событиями». По сути, вы можете добавить все элементы, которые хотите, и на них по-прежнему будут отвечать.