Question

I’m trying to trigger a .show on a div, when a link has a dynamically added class and it’s parent has the class pdSelectedSwatch which is added on selection(click).

example code:

<li class="pdSelectedSwatch">
   <a href="javascript:void(0)" class="outOfStock">
      <img class="outOfStock" src="/outofstock.gif" > 
   </a>
</li>



if ($("a.outOfStock").parent().hasClass("pdSelectedSwatch")) {
    $(".stockMessage").show();
}

But I can’t get it to work properly, and I’m betting my syntax is off.

I should note that the outOfStock class is determined by values in an xml file, and there are several functions that determine the link’s class based on that file.

I should also note that the site is using jQuery 1.4.2, which won’t be updated at thsi time.

thanks.

Answer 1

can we have some of your html to make sure the selectors are right?

reponse to user edit

//if the xml is parsed and used on page load, then just find the offending a.outOfStock elements
$(document).ready(){
//.find assumes the stock message is a child of the a.outOfStock Element.
// i am inferring there could be multiple a.outOfStocks on a page, and the message is localized.
 $(".pdSelectedSwatch > a.outOfStock").find(".stockMessage").fadeIn("slow");
}

---

//a global ajax complete event, you must check the uri used to be sure it is the ajax call you care about!
// you should probably add a 'complete' event to the original ajax call if you have control of it
// if you're still reading, then you may not be in control of the xml ajax call.
// you can still listen for a jQuery complete event.  this only works if the xml ajax call used jQuery as well.
$('selector for whatever called the ajax').ajaxComplete(function(e, xhr, settings) {
  if (settings.url == 'ajax/uri/you/used/to/get/the.xml') {
    $(".pdSelectedSwatch > a.outOfStock").find(".stockMessage").fadeIn("slow");
  }
});

---

// as of 1.4.2
$(".pdSelectedSwatch > a").delegate(".outOfStock","click", function(event){
         $(".stockMessage").show();
        });