CODEWITHSUNDEEP
jqueryajax
CLiown
CLiown

Reputation: 13853

Help with jQuery Delegate

Im trying to use .delegate to assign click events to dynamically loaded content. As you scroll additional content is loaded via Ajax.

Here is the jQuery I have written which works for the static content but not for the content that gets loaded dynamically:

$('#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;

});

Here is my HTML:

Button

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>

Basically new content gets added to the start of this list, and to the end of this list archive content gets added as the user scrolls.

Im using delegate on other parts of the page and it works but not this part.

Any help appreciated!

Upvotes: 0

Views: 762

Answers (3)

nathan gonzalez
nathan gonzalez

Reputation: 12017

does the statically loaded #fav div wrap all #submits, or just one? i assume the issue is that your delegating it to an object that isn't high enough on the dom. try replacing #fav with body, or some wrapper element.

additionally, as commented above, you should not use ids more than once on a given page, so a class .submit would be preferable.

$('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;

});

you'll probably need to add some context to those jquery selectors as well.

Upvotes: 0

John Strickler
John Strickler

Reputation: 25421

Which part of the page is being dynamically generated? If the element with ID of #fav is being dynamically generated then it won't work. You'll need to delegate the event handler to an element that exists on the page at the time the event is bound.

More info, preferably the HTML markup in question? :)

Upvotes: 0

BBonifield
BBonifield

Reputation: 5003

My first guess would be that this is caused because you're trying to add multiple #submit elements. Element IDs are unique and should not be used more than once. I'd suggest switching to a submit class and trying again with...

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

You should also switch your usage of #favid.

Upvotes: 1

Related Questions