Помогите с jQuery Delegate

Question

Я пытаюсь использовать .delegate для назначения событий щелчка динамически загружаемому контенту.При прокрутке дополнительный контент загружается через Ajax.

Вот написанный мной jQuery, который работает для статического контента, но не для контента, который загружается динамически:

$('#fav').delegate("#submit", "click", function() {

    var favid = $("input#favid").val();
    var favsave = 'favid=' + favid;
    $.ajax({
      type: "POST",
      url: "fav.php",
      data: favsave,
      success: function() {
        $('#fav').fadeOut(100);
      }
    });
    return false;

});

Вотмой HTML:

Кнопка

http://a2.twimg.com/profile_images/499579722/Lambda_twitterPic_normal.gif'alt='lambdasolutions' title = 'lambdasolutions' /> http://twitter.com/lambdasolutions' alt = 'lambdasolutions' title = 'lambdasolutions'> lambdasolutions

  <div class='atweet'>Why Use Moodle? | 
    <a target='_blank' href="http://bit.ly/aLld9q">http://bit.ly/aLld9q</a> | <a target="_blank" href="http://search.twitter.com/search?q=%23moodle">#moodle</a> 
    <a target="_blank" href="http://search.twitter.com/search?q=%23elearning">#elearning</a> 
    <a target="_blank" href="http://search.twitter.com/search?q=%23edtech">#edtech</a> 
  </div>

  <div class='date'>16-09-2010 22:44</div>

    <form id='fav' method='post' class='options' action=''>
      <input style='display: none;' type='text' name='fav' id='favid' value='24699868222' />
      <input type='submit' value='Add to Favorites' name='submit' id='submit' />
    </form>
</li>

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

Я использую делегат в других частях страницы, и это работает, ноне эта часть.

Любая помощь приветствуется!

Answer 1

Мое первое предположение будет, что это вызвано тем, что вы пытаетесь добавить несколько #submit элементов Идентификаторы элементов являются уникальными и не должны использоваться более одного раза. Я бы предложил перейти к классу submit и повторить попытку с ...

$('#fav').delegate(".submit", "click", function() {

Вам также следует переключить использование # favid.

Answer 2

Какая часть страницы генерируется динамически?Если элемент с идентификатором #fav генерируется динамически, он не будет работать.Вам нужно будет делегировать обработчик события элементу, который существует на странице во время привязки события.

Больше информации, желательно разметку HTML?:)

Answer 3

статически загруженный #fav div оборачивает все #submits или только один?Я предполагаю, что проблема в том, что вы делегируете его объекту, который недостаточно высок для домена.попробуйте заменить #fav на body или какой-либо элемент-обертку.

Кроме того, как указано выше, не следует использовать идентификаторы более одного раза на данной странице, поэтому предпочтительным будет класс .submit.

$('body').delegate(".submit", "click", function() {

    var favid = $("input#favid").val();
    var favsave = 'favid=' + favid;
    $.ajax({
      type: "POST",
      url: "fav.php",
      data: favsave,
      success: function() {
        $('#fav').fadeOut(100);
      }
    });
    return false;

});

вам, вероятно, потребуется добавить некоторый контекст к этим селекторам jquery.