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( ' ' ).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?

Answer 1

• 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;
}
?>