Re-Tying a the jquery click dynamically after replacing the element

Question

I have a set of nested elements like such.

<div id="master">
    <span id="num-1" class="num"></span>
    <span id="num-2" class="num"></span>
    <span id="num-3" class="num"></span>
    <span id="num-4" class="num"></span>
</div>

And I have the following script

$( document ).ready( function() {
    $( '#master > span.num' ).click( function() {
        q = $( "span[id*=num-']" ).attr( "id" );
        $( '#master' ).html( '&nbsp;' ).load( 'www.someurl.com/?rating=' + q );
    });
});

The load function returns a completely new set of span elements for inside the div. Problem is that I can't seem to figure out how to get this to work past the first time I click one. Since the click is tied to the spans and the spans get replaced, I understand that they no longer have a script tied to them, but I haven't been able to figure out how to get this to re-tie on the fly. I'm super new to jquery and javascript so any help would be appriciated.

All my experiments with using .live() have merely rendered my script useless. Help?

Try live (it associates an event handler whenever a matching element appears in the DOM) — Mayo
– Mayo, Commented Mar 18, 2011 at 21:55
My attempts are burried in older revisions in my subversion repository. I'll dig one out if there isn't an answer here when I get back. I tried a number of different approaches to using the live() approach and wasn't able to get them to work. I'm sure it was something simple but I couldn't figure it out. — Piper Merriam
– Piper Merriam, Commented Mar 18, 2011 at 21:58

Luca Filosofi · Accepted Answer · 2019-12-07 21:42:15Z

3

DEMO: https://so.lucafilosofi.com/re-tying-a-the-jquery-click-dynamically-after-replacing-the-element/

EDITED: as suggested by Beejamin

$( function() {
    $('#master').click( function(e) { 
    if (e.target.className.indexOf('num') !== -1) {
        var num = e.target.id.split('-')[1]; //this give you # instead of num-#
        $(this).load( 'rating.php/?rating=' + num );
      }  
    });
});

  $(function() {
    $('.num').live('click',function() {
     var num = this.id.split('-')[1]; //this give you # instead of num-#
        $('#master').load( 'rating.php?rating=' + num );
          return false;
    });
});

I suppose you are trying to do a rating system? just for sake my PHP file look like this:

<?php
  if (isset($_GET['rating'])) {
  $rating = (int) $_GET['rating'];
  for ($i = 1; $i < 5; $i++) {
    $a .= "<a id='num-{$i}' class='num".($rating >= $i ? ' rated' : '')."'></a>";
  }
  echo $a;
}
?>

edited Dec 7, 2019 at 21:42

answered Mar 18, 2011 at 22:57

Luca Filosofi

31.2k9 gold badges72 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ben Hull Over a year ago

jQuery's .live() is a shortcut to a document-level event delegation solution like the one I posted. .live() is kind of a brute-force approach, and isn't nearly as efficient as choosing the element to delegate to yourself.

Luca Filosofi Over a year ago

@Beejamin: dear, you point is valid, i have updated my answer accordingly. ;) +1

Ben Hull Over a year ago

Don't get me wrong - .live() is great for a lot of things. Your detection of the className and extraction of the ID is much neater too. Touche and +1!

Piper Merriam Over a year ago

Thanks. I ended up doing a combination of some of these examples. So new to writing javascript that it was REALLY helpful to see a couple of ways this could be done.

Ben Hull · Accepted Answer · 2011-03-18 22:12:59Z

There's a better way of handling this called 'event delegation' - rather than assigning your click events to each individual span, you can assign the event to the #master div. Because click events 'bubble up' - when you click any element, the click event will be passed up to the #master div. The event itself contains the .target property, which is a reference to the original element that was clicked.

This is much faster (you only have to assign one event, not many), and only needs to be set once.

Your code example becomes:

$( document ).ready( function() {
    $( '#master' ).click( function(e) {
    if (e.target.className == 'num') {//Check if the target that was clicked is one of the elements we want.
        q = $(e.target).attr('id');
        $('#master').html('&nbsp;').load( 'http://www.someurl.com/?rating=' + q );
      }
    });
});

Here's some background on event delegation: http://www.cherny.com/webdev/70/javascript-event-delegation-and-event-hanlders, and more info on event bubbling: http://www.quirksmode.org/js/events_order.html

The only thing you'd have to watch, is that, if you put extra HTML inside your span.num, e.target will point to that element if it's clicked (which is easy enough to account for). If you're only ever going to have text inside the span, you'll be fine with this code.

SadullahCeran · Accepted Answer · 2011-03-18 22:17:29Z

0

You can define a function for that and provide recursion

function spanClicked(){
    q = $( "span[id*=num-']" ).attr( "id" );
    $( '#master' ).html( '&nbsp;' ).load( 'www.someurl.com/?rating=' + q );
    $( '#master > span.num' ).click( spanClicked);
}

$( document ).ready( function() {
    $( '#master > span.num' ).click( spanClicked);
});

answered Mar 18, 2011 at 22:17

SadullahCeran

2,4075 gold badges20 silver badges34 bronze badges

Comments

Shameer · Accepted Answer · 2011-03-19 11:19:53Z

0

You can use jQuery .live() to bind events on the fly. You can check the plugin http://docs.jquery.com/Plugins/livequery For more flexibility.

answered Mar 19, 2011 at 11:19

Shameer

3,0861 gold badge23 silver badges27 bronze badges

Collectives™ on Stack Overflow

Re-Tying a the jquery click dynamically after replacing the element

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related