0

I have a few .filter-options-title elements that are loaded via ajax with below jquery. Once added to the DOM i use an each function to shrink some if their location is below a certain point on the page however the simulated click function does not seem to be firing on the new elements.

Clicking the elements directly on the page does fire the click event so i believe they are bound to the event fine.

How can I get around this?

$.ajax({
  url: filterurl,
  type: "get",
  type: "get",
  data: {
    ajax: "1",
    filters: "1"
  },
  dataType: "json",
  success: function(result) {
    $(".filterloading").remove();
    $(".sidebar").prepend(result['html']['filters']);
    $('.filter-options-title').each(function(i, obj) {
      if ($(this).offset().top + $(this).outerHeight() > ajaxMode.calculateHeight()) {
        if ($(this).attr('aria-expanded') == 'true') {
          $(this).click();
        }
      }
    });
  },
  error: function() {
    alert("Error please refresh page."); // inform the user about error
  }
});
harri
  • 494
  • 11
  • 26
  • The fact they weren't originally in the DOM is not the issue as the `prepend()` call is synchronous. Are you sure your `if` statement comparing offset.top and the height is correct? That's the far more likely point of failure. It would help to see an example of the DOM *after* the AJAX call has appended the elements – Rory McCrossan Jan 11 '18 at 10:24
  • Ok maybe its the click function that doesnt work then sorry. It loops through fine and tells me that some need to be shrunk but where using click function to collapse the elements previously worked now it doesn't – harri Jan 11 '18 at 10:34
  • That would be due to requiring the use of a delegated event handler on appended content. See the duplicate for more information – Rory McCrossan Jan 11 '18 at 10:39
  • That seems to be detecting a click how does it change when simulating a click? – harri Jan 11 '18 at 10:42
  • Are you not binding your own click event handler to the element which the `click()` call triggers? – Rory McCrossan Jan 11 '18 at 10:43
  • I dont want to modify what happens on the event. I simply want to simulate a click event on the element $(this) within the loop. – harri Jan 11 '18 at 10:45
  • Sorry my terminology is poor – harri Jan 11 '18 at 10:46
  • Right, but my point is how is that `click()` event *bound* to the element? – Rory McCrossan Jan 11 '18 at 10:46
  • Im not to sure. This is done by magento and all i know is that it collapses a drop down. This works however on the page and clicking the element does collapse the dropdown. I havent really looked into the core code here for this. – harri Jan 11 '18 at 10:47
  • 1
    That's the event you need to find and change to a delegated event - as per the duplicate – Rory McCrossan Jan 11 '18 at 10:48
  • Ok right. Im with you – harri Jan 11 '18 at 10:49
  • Was hoping there was another easier way tho! Thanks for your help! – harri Jan 11 '18 at 10:49
  • Wouldnt the click event not work however on the page if this is correct? As like actually clicking it (as opposed to javascript simulated clicks) does work and so the event does seem to had bound to my ajax loaded elements? – harri Jan 11 '18 at 10:55
  • Ok, in that case try `$(this)[0].click();` – Rory McCrossan Jan 11 '18 at 11:01
  • That doesn't seem to work either. – harri Jan 11 '18 at 11:05
  • Ok the initialising of js for my filters after the ajax call was taking a while for the filters. I used a 3 second timeout and then the click event started working. – harri Jan 11 '18 at 11:41

0 Answers0