Attach jQuery behavior to AJAX loaded content

Question

I would like to add some jQuery behavior to a page using the FAPI #ajax behavior (a Commerce product reference add to cart form)

I used a custom module (Commerce Taxonomy Field Product Attribute) to replace the standard text output of the taxonomy term attribute by an image, and hide the radio button of the add to cart form via CSS (display: none). The goal is to let the user click on the image label to select his product's color or size. See a screenshot without css, and with css

I added some custom jquery that adds a "hover" and "selected" class to the label (on mouse over and clicked event) in order to have a ui feedback via CSS - as the Commerce add to cart form uses radios element, there is no "hand" mouse pointer on hover, which can be quite disturbing for the UI. --> It works fine the first time the page is loaded but doesn't get attached when a product is reloaded by ajax.

I have a JS file with

Drupal.behaviors.custom_danity_afficheur_produit_label_hover = {    
  attach: function (context, settings) {
    //All the code that attaches the click / hover event functions using jQuery.once()
  }
}

I tried loading the JS file at different level :

1. in the template .tpl.php file
2. in the add to cart form alter hook in
3. a function callback on the add to cart form #post_render attribute

None of these work, the AJAX only works the first time it is loaded.

It's not the first time I try to add jQuery code to an ajax loaded content - I managed last time to modify the code and use FAPI Ajax to make it work - but here i don't know how to do it as the product attributes already have an Ajax behavior implemented by Commerce... and as far is i know, it's not possible to attach multiple ajax behavior to an element with Drupal FormAPI

Any help would be much much much much much appreciated :-)

Answer 1

Ok I managed to make it work.

Drupal did try to re-attach the behavior on my content after it was added by AJAX, but my selectors were starting from too "early" in my DOM - as such, when drupal.attachBehavior got called by the system, it couldn't find the right selector.

Example : My DOM look like this :

<div id="product-add-to-cart">
    <div class="class1">
        <input ... class="input1" />
        <input ... class="input2" />
        <input ... class="input3" />
    </div>
</div>

My jQuery selector looked like this $('#product-add-to-cart .class1 input.input1").hover(...);

As I understand, FormAPI was replacing what was INSIDE #product-add-to-cart .class1, while the context passed to Drupal.attachBehavior only had part of this markup (the input elements..) : hence $('#product-add-to-cart .class1 input.input1").hover(...); couldn't return anything in this context.

I replaced my jQuery $('#product-add-to-cart .class1 input.input1").hover(…); with $('input.input1").hover(…); and it works like a charm.