4

I am trying to be a good boy and use Drupal Behaviors to manage my JavaScript. My understanding is that one of the advantages of using Behaviors is that it frees you from having to use .live() to bind event handlers to dynamically created elements. However, I find that I have to use .live() all the time. What am I doing wrong?

Here is a simple example of what I'm talking about:

Drupal.behaviors.MySearch = {

  attach: function (context, settings) {

    var searchBox = $('#my-search-box');
    searchBox.append("<input type='text'></input>");
    searchBox.append("<button>Search</button>");

    $('#my-search-box button').click(function(){
      console.log("This does not work.");
    });

    $('#my-search-box button').live('click', function(){
      console.log("This does work.");
    });

};
4

My understanding is that one of the advantages of using Behaviors is that it frees you from having to use .live() to bind event handlers to dynamically created elements.

Yes and no. It certainly can be used for that, but it will only work if Drupal has invoked the previous AJAX call. If you've just done a $.ajax(...), Drupal won't know about it, and attachBehaviors() won't be invoked.

I would guess that your attach() method is indeed only being invoked once, as it would explain perfectly why the click handler is assigned once (when the page is first loaded), but not again. The live() will always work no matter how many times your attach() method is called.

If that is the problem, to fix simply add this to your AJAX success callback:

Drupal.attachBehaviors();
4
  • Aside, As of jQuery 1.7 live() is deprecated. Use on() instead. Any comment?
    – llamasocks
    Oct 24 '14 at 16:44
  • @cdmo Only that Drupal 7 still ships with jQuery 1.4 by default...
    – Clive
    Oct 24 '14 at 16:45
  • Ah, right. I override with a later version, thanks.
    – llamasocks
    Oct 24 '14 at 16:45
  • I think it's safe to say most people do these days @cdmo. You're right of course, jQuery Update + using on() would always be preferrable
    – Clive
    Oct 24 '14 at 16:47
0

live() is always the best option because it dynamically bind ajax response but click doesn't. So always use live() or on() function

3
  • Your version of jQuery might doesn't support click Which version of jQuery doesn't support click()? Considering it was added in 1.0, and is still there, you'd have to be using a pre-beta version from about 10 years ago for that to be true
    – Clive
    Oct 24 '14 at 16:00
  • Shabir -- I did verify that click() is supported; I will follow your advice of using live().
    – ontoligent
    Oct 24 '14 at 16:02
  • Sorry, guys! I used click in one of my application and it wasn't working I think it had an issue with drupal behaviour function - thanks for the correction @Clive
    – Shabir A.
    Oct 24 '14 at 16:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.