Jquery DOM Manipulation is not accepted by Class selectors

Question

I have a jquery which makes an ajax call and builds a list of <li tags> with class= criteria-selctor.

I have another jquery which triggers on click of elements that belong to class= criteria-selector.

The problem i am facing is that the jquery trigger does not work on li elements build by javascript..

Please help..!!! Thanks.

Here is the code:

var callCollectionsAPI = function() {

  $.ajax({
   url: {{settings.api_base_url}} + '/collections',
   method: 'GET',
    success: function(collections) {
      renderCollectionsResult(collections);
    }
});
}

var renderCollectionsResult = function(collections) {

  var subjectsElement = document.getElementById("subjects");
  var stylesElement = document.getElementById("styles");  
  var subjectsInnerHTML = '', stylesInnerHTML = '';
  var subjectsCollection = collections['subjects'];
  var stylesCollection = collections['styles'];
  for (var i=0; i<subjectsCollection.length; i++) {

    subjectsInnerHTML = subjectsInnerHTML + getCollectionsHTML(subjectsCollection[i]);
  }
 for (var i=0; i<stylesCollection.length; i++) {

    stylesInnerHTML = stylesInnerHTML + getCollectionsHTML(stylesCollection[i]);
  }
  subjectsElement.innerHTML = subjectsInnerHTML;
  stylesElement.innerHTML = stylesInnerHTML;

}

var getCollectionsHTML = function(collections) {

  var listHtml =  '<li> <a href="#" id="'+ collections['title'] +'" data-value="' + collections['title'] + '" class="criteria-selector">' + collections['title'] + '(78) </a> </li>'
  return listHtml;
}

The above code builds dom based on ajax call..! The code below needs to select all elements with class -'criteria-selector' but it does not for those built by the above code, and works for html written prior to load.

var classHighlight = 'highlight';
var $thumbs = $('.criteria-selector').click(function(e) {
    e.preventDefault();
       var target = $(this);
    var listNode = $(target.parents('ul')[0]).find('.highlight').removeClass(classHighlight);
    $(this).addClass(classHighlight);
  var id = this.id;
  var priceBucketRange='&priceBucketRange=' + id;
 $.ajax({
    url: 'http://localhost:8080/api/artworks/search/?page=0' + priceBucketRange,
   method: 'GET',
    success: function(artworks) {
      renderResult(artworks);

    }
});
});

Add the code what you tried. This is difficult to find the issue here. — Mahesh Thumar, Sep 12 '14 at 05:13
use event delegation, this will help:http://stackoverflow.com/questions/25085926/jquery-form-not-working-when-part-of-ajaxed-content/25085987#25085987 — Ehsan Sajjad, Sep 12 '14 at 05:15
Post your code. jsfiddle.net I'm guessing you may be assigning the selector variable before including the objects in the page. — James G., Sep 12 '14 at 05:20
possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Mysteryos, Sep 12 '14 at 05:26

score 1 · Accepted Answer · answered Sep 12 '14 at 05:27

You are most probably using direct event handlers. In this case either you should bind the event handlers once again after the new DOM is built, or you should switch to delegated ones:

// direct
$.ajax({
    success: function (data) {
        // build DOM
        $(".criteria-selector").bind("click", function (event) {
             // bind events on new dom 
        });
    }
});

// delegated
$(document).on("click", ".criteria-selector", function (event) {
    // bind delegated event handler on the document and fire the event
    // for every element matching the criteria selector, regardless of
    // when this element was created 
});

Jquery DOM Manipulation is not accepted by Class selectors

1 Answers1