在动态元素上触发jQuery [英] triggering jquery on dynamic elements

问题描述

当链接具有动态添加的类并且其父级具有在选择(click)上添加的类pdSelectedSwatch时，我正在尝试在div上触发.show.

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).

示例代码:

<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.

我应该注意outOfStock类是由xml文件中的值确定的，并且有多个函数可以基于该文件确定链接的类.

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.

我还应该注意，该网站使用的是jQuery 1.4.2，该版本暂时不会更新.

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

谢谢.

推荐答案

我们可以提供一些html来确保选择器正确吗?

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

//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();
        });

这篇关于在动态元素上触发jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！