Клік-менеджер не може знайти цільову кнопку - jquery, html, ajax, обробка подій, jquery-кроки

Я використовував обробник кліків для виконання запиту, коли я натискаю кнопку. Ця подія добре працює, коли кнопка розташована за межами слайдер Також, якщо я застосую подію кліків на слайдер. Я спробував багато способів, щоб зробити це працювати, але все одно не розуміючи, що може викликати це.

Чи може скрипт jQuery подібно до дій jQuery впливати на інший скрипт jQuery?

HTML:

<div id="main">
<div id="slider">

<h3>1</h3>
<section>
<p id="head">I"m using JQuerySteps.</p>
<p id="body"><button type="button">Here is the button.</button></p>
</section>

</div>
</div>

jQuery:

$("button").click(function(){

$("#main").load("get.php", function(responseTxt, statusTxt, xhr){

});

});

Проблема: Коли я намагаюся натиснути кнопку, коли вона знаходиться в рамках кроків jQuery (#slider), обробник кліків не працює.

Я впевнений, що це питання звучить досить нерозумно, але я буду вдячний за будь-яку коротеньку пораду чи пораду. Спасибі у зв'язку з Володимиром.

Відповіді:

Це створить обробник кліків на відповідному елементі:

$("button").click(function(){
// ...
});

Однак, це збирається видалити цей елемент з DOM (і я вважаю, що замінити його іншим аналогічним?):

$("#main").load();

Оригінальний button тепер вже не існує, і тому його обробник кліків. Тож натискання нової кнопки нічого не зробить, тому що не має обробника.

Замість того, щоб прикріпити обробника безпосередньо до (короткочасне) button, прикріпіть його до спільного батьківського елемента та фільтруйте його на button. Щось на зразок цього:

$(document).on("click", "#body button", (function(){
// ...
});

Таким чином, сам обробник прикріплений до незмінного елементу (у цьому випадку document, хоча який-небудь незмінний ієрархічний батьківський елемент буде робити), так що функція обробника не втрачається. Це називається делегація події.