SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard
    Join Date
    Mar 2002
    Location
    Bristol, UK
    Posts
    2,240
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JQuery: assigning events to loaded elements

    I'm using JQuery's load() function to populate several DIVs with the content of separate files.

    The problem is, I've realised it is not possible to assign events to elements that are not on the page at the start.

    For example, if I have the following code in the file external.html:
    HTML Code:
    <a href="somewhere.html" class="help">Help</a>
    And index.html is set up something like this:
    HTML Code:
    <script type="text/javascript" src="/jquery.ui-1.5.2/jquery-1.2.6.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $("#my_div").load("external.html");
        $(".help").click(function() { alert("clicked!"); });
    });
    </script>
    <div id="my_div"></div>
    The addClass command won't recognise the link class in the newly loaded page.

    One workaround to this involved adding the JavaScript into the external.html file itself, but in my situation I needed to load external.html into multiple DIVs, and this caused the JavaScript to execute once for each load() command, which was far from desirable.

    Anyone know how to go about doing this properly?

  2. #2
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The best solution would probably be to place the event assignment within the callback function of the "load":

    Code JavaScript:
    <script type="text/javascript" src="/jquery.ui-1.5.2/jquery-1.2.6.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $("#my_div").load("external.html",function(){
            $(".help").click(function() { alert("clicked!"); });
        });
    });
    </script>
    <div id="my_div"></div>
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    I was watching a google tech talk by john resig about this recently, and he demonstrated a feature where events can accept a second parameter so that they watch for any changes to that area, and apply the event to those new sections.

    It used to be called behaviour, but I believe is now a plugin called liveQuery

    Code javascript:
    $('a').livequery('click', function(event) {
    	alert('clicked');
    	return false;
    });
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Looks really good Paul! ...

    Just something to note if you use it - testing it, it doesn't seem to work with elements added without the use of jQuery.

    E.g.

    Code JavaScript:
    $('a').livequery('click', function(event) {
        alert('clicked');
        return false;
    });
     
    // The above function will be correctly binded to this:
    $('body').append('<a href="#">linky</a>');
     
    // BUT, not to this:
    document.getElementsByTagName('body')[0].appendChild((function(){
      var new1 = document.createElement('a');
      new1.href = '#';
      new1.appendChild(document.createTextNode('linky'));
      return new1;
    })());

    Not really an issue because you'll be using jQuery anyway...
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •