CODEWITHSUNDEEP
javascriptjqueryhtml
halocursed
halocursed

Reputation: 2495

Issue with selectors & .html() in jquery?

The function associated with the selector stops working when I replace it's contents using .html(). Since I cannot post my original code I've created an example to show what I mean...

Jquery

$(document).ready(function () {
    $("#pg_display span").click(function () {
        var pageno = $(this).attr("id");
        alert(pageno);
        var data = "<span id='page1'>1</span><span id='page2'> 2</span><span id='page3'> 3</span>";
        $("#pg_display").html(data);
    });
});

HTML

<div id="pg_display">
    <span id="page1">1</span>
    <span id="page2">2</span>
    <span id="page3">3</span>
</div>

Is there any way to fix this??...Thanks

Upvotes: 2

Views: 204

Answers (5)

SolutionYogi
SolutionYogi

Reputation: 32243

In your situation, you can use 'Event delegation' concept and get it to work.

Event delegation uses the fact that an event generated on a element will keep bubbling up to its parent unless there are no more parents. So instead of binding click event to span, you will find the click event on your #pg_display div.

$(document).ready(
    function()
    {
        $("#pg_display").click(
            function(ev)
            {
                //As we are binding click event to the DIV, we need to find out the
                //'target' which was clicked. 
                var target = $(ev.target);

                //If it's not span, don't do anything. 
                if(!target.is('span'))
                   return;                

                alert('page #' + ev.target.id);
                var data="<span id='page1'>1</span><span id='page2'>2</span><span id='page3'>3</span>";
                $("#pg_display").html(data);

            }
         );
    }
);

Working demo: http://jsbin.com/imuye

Code: http://jsbin.com/imuye/edit

The above code has additional advantage that instead of binding 3 event handlers, it only binds one.

Upvotes: 1

Sampson
Sampson

Reputation: 268414

Not sure I understand you completely, but if you're asking why .click() functions aren't working on spans that are added later, you'll need to use .live(),

$("#someSelector span").live("click", function(){
  # do stuff to spans currently existing
  # and those that will exist in the future
});

This will add functionality to any element currently on the page, and any element that is later created. It keeps you have having to re-attach handlers when new elements are created.

Upvotes: 5

Dave Ward
Dave Ward

Reputation: 60580

That's to be expected, since the DOM elements that had your click handler attached have been replaced with new ones.

The easiest remedy is to use 1.3's new "live" events.

Upvotes: 1

nopuck4you
nopuck4you

Reputation: 1700

Use the $("#pg_display span").live('click', function....) method instead of .click. Live (available in JQuery 1.3.2) will bind to existing and FUTURE matches whereas the click (as well as .bind) function is only being bound to existing objects and not any new ones. You'll also need (maybe?) to separate the data from the function or you will always add new span tags on each click.

http://docs.jquery.com/Events/live#typefn

Upvotes: 0

Philippe Leybaert
Philippe Leybaert

Reputation: 171864

You have to re-bind the event after you replace the HTML, because the original DOM element will have disappeared. To allow this, you have to create a named function instead of an anonymous function:

function pgClick() {
  var pageno = $(this).attr("id");
  alert(pageno);
  var data="<span id='page1'>1</span><span id='page2'> 2</span><span id='page3'> 3</span>";
  $("#pg_display").html(data);

  $("#pg_display span").click(pgClick);
}

$(document).ready(function(){
  $("#pg_display span").click(pgClick);
});

Upvotes: 4

Related Questions