jquery click не працює на вмісті, створеному ajax

79

я використовую $(".button").on("click", function(){ });

натиснути на кнопку, яка знаходиться на контейнері, але потім здійснюється виклик ajax, і вміст оновлюється новими матеріалами, а потім, коли я намагаюся натиснути, .buttonце не спрацює ... нічого не повернеться, коли я натисну кнопку.

Я навіть намагався

$(".button").live("click", function(){ });

або

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

Як я можу змусити це працювати?

EDIT: мій html:

<div class="container">
   <ul>
       <li>item1</li>
       <li>item2</li>
       <li>item3</li>
   </ul>
   <input type="button" value="reload" class="button" />
</div>

— stergosz
джерело

1

Будь ласка, покажіть, що повертається викликом ajax.

— ron tornambe

І решта jQuery, яка прив’язує слухача. Те, що ви описуєте, - це саме те, що liveмає оброблятись, тому дивно, що це не працює.

— Brandan

у мене є ul, де я натискаю на них і просто повторюю "тест" у javascript за допомогою .on ("клацання"), але коли я натискаю кнопку, він здійснить виклик ajax і перезавантажить ul, але тоді він перестане робити нічого, коли я натисніть кнопку .. вона нічого не поверне.

— stergosz

158

Це слід робити таким чином.

$('body').on('click', '.button', function (){
        alert('click!');
    });

Якщо у вас є контейнер, який не змінюється під час запиту ajax, це є більш продуктивним:

$('.container').on('click', '.button', function (){
        alert('click!');
    });

Завжди прив’язуйте подію делегата до найближчого статичного елемента, який буде містити динамічні елементи.

— gdoron підтримує Моніку
джерело

Дякую за відповіді! Тим не менше вважаєш, що це дуже дивно, і не відчуваєш себе добре використовувати такий спосіб. Wish jquery мав кращий спосіб вирішення подібних ситуацій

— Мігель Стівенс

1

@MiguelStevens, читайте документи, як тільки ви прочитали та зрозуміли концепцію, це не буде дивним і матиме цілком сенс.

— gdoron підтримує Моніку

Але як би я написав батьківський для цього ... $ ("input # someId"). Autocomplete ({// some code}); ... тут немає події ..

— Дракон

1

@Sadaquat, я пропоную написати повне запитання з усіма необхідними деталями в іншій темі. Якщо ви не отримаєте відповіді, можете надіслати мені коментар, і я з усіх сил намагатимусь допомогти.

— gdoron підтримує Моніку

1

Нарешті я знайшов рішення, яке шукав! Дякую, сер

— КП

40

Гаразд, я вирішив свою проблему, використовуючи функцію .on () правильно, оскільки мені бракувало одного параметра.

замість

$(".button").on("click", function() { } );

я використав

$(".container").on("click", ".button", function() { } );

— stergosz
джерело

1

Тільки примітка, аргумент селектора не є обов’язковим , але в цьому випадку є необхідним.

— Джаред Ферріш,

Дякую за рішення, +1

— Олдрі Віджая,

Чому аргумент селектора не потрібний, але необхідний у цьому випадку?

— ryentzer

Думаю, це тому, що в цьому випадку селектор повторно запущений, але якщо його не включити, він не потрапляє до спочатку запущеного списку елементів, захоплених селектором.

— Бінг

8

Замість:

$(".button").on("click", function() { } );

Я використав:

$(".container").on("click", ".button", function() { } );

Я використав це, і це спрацювало.

— Macc
джерело

3

Це те, що ти намагаєшся зробити? Зауважте, я ставлю $.on()на батьків, але вибираю .buttonдля дії.

.on (події [, селектор] [, дані], обробник (eventObject))

selector Рядок селектора для фільтрації нащадків вибраних елементів, що ініціюють подію. Якщо селектор нульовий або опущений, подія завжди запускається, коли вона досягає вибраного елемента.

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

<div id="stuff">
    <button class="button">Click me!</button>
    <p>Stuff</p>
</div>

var $stuff = $('#stuff'),
    ajaxContent = $stuff.html();

$stuff.on('click', '.button', function(){
    $.get('/echo/html/', function(){
        $stuff.empty();
        console.log($stuff.html());
        alert($stuff.html()); // Look behind, #stuff is empty.
        $stuff.html(ajaxContent);
        console.log($stuff.html());
    });
});

http://jsfiddle.net/62uSU/1

Ще одна демонстрація:

var $stuff = $('#stuff'),
    ajaxContent = $stuff.html(),
    $ajaxContent,
    colors = ['blue','green','red'],
    color = 0;

$stuff.on('click', '.button', function(){
    $.get('/echo/html/', function(){
        color++;
        if (color == colors.length) color = 0;
        console.log($stuff.html());
        alert($stuff.html());
        $ajaxContent = $(ajaxContent);
        $stuff.append($ajaxContent).css('color', colors[color]);
        console.log($stuff.html());
    });
});

http://jsfiddle.net/62uSU/2/

— Джаред Ферріш
джерело