Studiuję AJAX i mam problem.

Na przykład mój znacznik jest

<div id='ajax-container'>
  ..
  <div class='some-class-with-handler'>
    ..
  </div>
  ..
</div>

I mam program obsługi ONCLICK dla .some-class-fermerler -

$(document).ready(function() { 
  ..
  $('.some-class-with-handler').click(function(){
    ..
  });
  ..
}

Następnie AJAX przeciążenie wszystko w # AJAX-Container -block, ale .some-class-fondler -block jest nadal zawarty w nowej zawartości #ajax -Container -block. Jednocześnie Handler OnClick nie wiążą się z nową Jak mogę odbudować to wiązanie?

0
chaika_sv 15 sierpień 2014, 13:57

2 odpowiedzi

Najlepsza odpowiedź

Dwie wybory:

  1. Użyj jQuery.live: http://api.jquery.com/live/

    aktualizacja : zgodnie z Doc, live jest przestarzały od 1,7. Możesz użyć tej składni wymienionych w powyższym dokumcie:

    $( selector ).live( events, data, handler );                // jQuery 1.3+
    $( document ).delegate( selector, events, data, handler );  // jQuery 1.4.3+
    $( document ).on( events, selector, data, handler );        // jQuery 1.7+
    
  2. Rebind the click Handler po AJAX

    var someClassClickHandler = function(){
        ..
    };
    
    $('.some-class-with-handler').click(someClassClickHandler);
    
    $.ajax({
        success: function () {
            $('.some-class-with-handler').click(someClassClickHandler);
        }
    });
    
2
Junle Li 15 sierpień 2014, 10:09

To dlatego, że nowy .some-class-with-handler jest nowym elementem i nie możesz wiązać nowych elementów w ten sposób. Zmień swoją obsługę w ten sposób -

$(document).ready(function() { 
  ..
  $(document).on('click','.some-class-with-handler', function(){
    ..
  });
  ..
}
0
sakibmoon 15 sierpień 2014, 10:06