jquery delegate problem with jquery templates

Question

Hi all,

I've been using the jQuery templates code (jquery.tmpl.js on github) and it's been working very well for me. However, I'm trying to attach events to the content using delegate and it's not working. Here is my simplified HTML structure after the templates are inserted:

<!-- static in the html file -->
<div id="container">
  <!-- this div is inserted multiple times by the jquery template code -->
  <div class="rule">
    <button>Save</button>
  </div>
</div>

In my Javascript I have this set up

$(".rule").live("click", function() {console.log("live click");});

$("#container").delegate("click", ".rule button", function() {
  console.log("delegate click");
});

When the page runs I can click on the buttons inserted by the template, but I only get "live click" messages in the console log of Firebug. The delegate events never fire. I've tried several different targets/context for delegate, though I think what I have above is correct, but I can't get it to work.

Anyone have any suggestions, pointers or things I could try?

Thanks! Doug

Answer 1

the correct syntax for delegate() is delegate( selector, eventType, handler )

use

$("#container").delegate(".rule button", "click", function() {console.log("delegate click");});

• http://api.jquery.com/delegate/