-1

I have the code below that gives a style to the last word inside an element with a particular class and works fine.

This class is inside a grid of articles and when I click a filter that loads (without page reload) different articles, the new articles have not that style.

jQuery(document).ready(function($){

    $('.products h2.entry-title').html(function(index, curHTML) {
       var text = curHTML.split(/[\s-]/),
           newtext = '<span style="color:#fbb316;">' + text.pop() + '</span>';
       return text.join(' ').concat(' ' + newtext);
     });
    
});

Any help to fix this? Thank you.

isherwood
  • 58,414
  • 16
  • 114
  • 157
geoplous
  • 217
  • 2
  • 11
  • 1
    Might be better if you'd show some HTML and explain the desired outcome. You have something of an [XY question](http://xyproblem.info) here, where you're asking about your proposed solution instead of the problem. Your code looks overly complicated at first glance. – isherwood Aug 04 '21 at 13:35
  • 1
    Otherwise, jQuery's click handler has been well covered: https://stackoverflow.com/questions/4323848/how-to-handle-button-click-events-in-jquery – isherwood Aug 04 '21 at 13:36
  • 2
    You change the style on document ready, so every element added after the document load will not have. the style. make a function that you call on document.ready and when the new items are loaded – Gert B. Aug 04 '21 at 13:36
  • 1
    You probably want to call your code after the update process is completed, though. We can't help with that without knowing more. – isherwood Aug 04 '21 at 13:37

1 Answers1

0

This script runs once "jQuery(document).ready". This means when the document has finished loading it runs the script. The problem is later on you run a filter that loads in more elements.

Your best bet is to make this script a function:

$('.products h2.entry-title').html(function(index, curHTML) {
   var text = curHTML.split(/[\s-]/),
       newtext = '<span style="color:#fbb316;">' + text.pop() + '</span>';
   return text.join(' ').concat(' ' + newtext);
 });

Then you can call it on document ready, and call it again on success of loading in your new articles.

Although this will mean it applies a second time to the articles that were there initially (if the filter function doesn't completely remove them?). So you may have to make this function a little more clever by being able to detect which elements have already had this applied.

Tom Bowen
  • 8,214
  • 4
  • 22
  • 42
  • It is a filter like this: All, Cars, Trains, busses. So yes if you choose a category and then All, articles will be shown for the second time – geoplous Aug 04 '21 at 13:48
  • In which case you will need to make sure when you run the script for a second or third time that some elements do not have it applied multiple times. Maybe through the use of a class that you could add after you have run the script and only run the script on elements without the class? – Tom Bowen Aug 04 '21 at 13:53
  • I am not sure what you mean – geoplous Aug 05 '21 at 06:02