jquery click не работает с контентом, сгенерированным ajax

Я использую $(".button").on("click", function(){ });

для нажатия кнопки, которая находится в контейнере, но затем выполняется вызов ajax и содержимое обновляется новым материалом, а затем, когда я пытаюсь нажать .button, он не будет работать ... ничего не будет возвращено, когда я нажму кнопку

Я даже пытался

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

или

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

Как я могу заставить это работать?

РЕДАКТИРОВАТЬ: мой HTML:

<div class="container">
   <ul>
       <li>item1</li>
       <li>item2</li>
       <li>item3</li>
   </ul>
   <input type="button" value="reload" class="button" />
</div>
67 голосов | спросил fxuser 19 FebruaryEurope/MoscowbSun, 19 Feb 2012 01:37:06 +0400000000amSun, 19 Feb 2012 01:37:06 +040012 2012, 01:37:06

4 ответа


0

Должно быть сделано так.

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

Если у вас есть контейнер, который не изменяется во время запроса ajax, это более эффективно:

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

Всегда связывайте событие делегата с ближайшим статическим элементом, который будет содержать динамические элементы.

ответил gdoron 19 FebruaryEurope/MoscowbSun, 19 Feb 2012 01:53:15 +0400000000amSun, 19 Feb 2012 01:53:15 +040012 2012, 01:53:15
0

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

вместо

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

я использовал

$(".container").on("click", ".button", function() { } );
ответил fxuser 19 FebruaryEurope/MoscowbSun, 19 Feb 2012 01:51:20 +0400000000amSun, 19 Feb 2012 01:51:20 +040012 2012, 01:51:20
0

Вместо:

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

Я использовал:

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

Я использовал это, и это сработало.

ответил Macc 3 PMpWed, 03 Apr 2013 15:52:42 +040052Wednesday 2013, 15:52:42
0

Это то, что вы пытаетесь сделать? Обратите внимание, я помещаю $.on() на родителя, но выбираю .button для действия.

  

.on (события [, селектор] [, данные], обработчик (eventObject))

     

селектор Строка селектора для фильтрации потомков выбранного   элементы, которые запускают событие. Если селектор нулевой или опущен,   событие всегда инициируется, когда оно достигает выбранного элемента.

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/

ответил Jared Farrish 19 FebruaryEurope/MoscowbSun, 19 Feb 2012 01:46:27 +0400000000amSun, 19 Feb 2012 01:46:27 +040012 2012, 01:46:27

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132