jquery click이 Ajax 생성 콘텐츠에서 작동하지 않음

jquery click이 Ajax 생성 콘텐츠에서 작동하지 않음

사용하고 있다$(".button").on("click", function(){ });

컨테이너에 있는 버튼을 클릭하지만 Ajax 호출이 완료되고 콘텐츠가 새로운 내용으로 업데이트되며 클릭하려고 할 때.button효과가 없을 거야...버튼을 클릭해도 아무것도 반환되지 않습니다.

노력도 했어요

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

또는

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

어떻게 하면 될까요?

편집: my html:

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

이런 식으로 해야 한다.

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

ajax 요청 중에 변경되지 않는 컨테이너가 있는 경우 다음과 같이 성능이 향상됩니다.

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

항상 동적 요소를 포함하는 가장 가까운 정적 요소에 위임 이벤트를 바인딩하십시오.

네, 파라미터가 1개 부족하기 때문에 .on() 함수를 올바르게 사용하여 문제를 해결했습니다.

대신

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

나는 사용했다

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

대신:

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

사용:

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

이걸 써봤는데 잘 되더라고요.

이게 네가 하려는 거야?참고, 난 지금...$.on()부모에 대해서입니다만,.button액션을 위해서.

.on ( events [ , selector ][ , data ] , handler ( event Object ) )

Selector 이벤트를 트리거하는 선택된 요소의 하위 요소를 필터링하는 선택 문자열.셀렉터가 null 또는 생략된 경우 이벤트는 항상 선택한 요소에 도달하면 트리거됩니다.

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/

언급URL : https://stackoverflow.com/questions/9344306/jquery-click-doesnt-work-on-ajax-generated-content