带动态内容的JQuery

如果我在转发器中有一个div标签，并且我想为每个div标签添加一个jquery效果，那怎么做？带动态内容的JQuery

<script type="text/javascript"> 
    $(function() { 
     //run the currently selected effect 
     function runEffect() { 
      //most effect types need no options passed by default 
      var options = {}; 
      //check if it's scale, transfer, or size - they need options 
      //if (selectedEffect == 'scale') { options = { percent: 0 }; } 

      //run the effect 
      $("#effect").effect('explode', options, 500, callback); 
     }; 

     //callback function to bring a hidden box back 
     function callback() { 
      setTimeout(function() { 
      $("#effect:hidden").removeAttr('style').hide().fadeIn(); 
      }, 1000); 
     }; 

     //set effect from select menu value 
     $(document).ready(function() { 
      $("div.effect").click(function() { 
       runEffect(); 
       return false; 
      }); 
     }); 
    }); 
</script> 

<asp:Repeater ID="repItems" runat="server"> 
    <ItemTemplate> 
<div class="toggler"> 
    <div id="effect" class="ui-widget-content ui-corner-all"> 
    <h3 class="ui-widget-header ui-corner-all"><%#Eval("Tag") %></h3> 
    </div> 
</div> 
</ItemTemplate> 
</asp:Repeater>

我试过以上，但只有第一个div的作品。我究竟做错了什么？？

来源

2009-10-17 fARcRY

尝试使用一类像这些div：

<div id="effect" class="effect ui-widget-content ui-corner-all">

和jQuery中使用（ “div.effect”）选择。

我“认为”，使用相同的ID为多件事情可能会导致问题... HTML元素

来源

2009-10-17 16:17:28

通知我在课堂上添加了EFFECT – 2009-10-17 16:28:00

的id值required to be unique across the entire document。您为该中继器显示的每个项目使用相同的id值，违反该规则。现在，网络就是这样，您的浏览器不会抱怨，但尝试通过a validator运行您的呈现HTML。 jQuery只对第一个这样的元素起作用，因为它期望只有一个是。

如果你从id切换到class，你应该有更好的结果。

来源

2009-10-17 16:23:34

要考虑的另一个想法是在中继器周围放置一个带有id的div标签。中继器本身看起来很直截了当，看着你的jquery，看起来并不重要的是中继器中的哪个div标签被点击。

$(document).ready(function() { 
    $("#base").click(function() { 
    runEffect(); 
    return false; 
    }); 
}); 



<div id="base"> 
    <asp:Repeater ID="repItems" runat="server"> 
     <ItemTemplate> 
    <div class="toggler"> 
     <div id="effect" class="ui-widget-content ui-corner-all"> 
     <h3 class="ui-widget-header ui-corner-all"><%#Eval("Tag") %></h3> 
     </div> 
    </div> 
    </ItemTemplate> 
    </asp:Repeater> 
</div>

来源

2009-10-17 16:44:45 Kamal

我认为你需要改变的是在附加了click事件“就绪”功能 - 使用了$（“div.effect”）作为选择，它看起来并不有效，以我。我建议使用$（'。ui-widget-content'）。这选择基于类，而不是id（这应该是别人指出的唯一）。

来源

2009-10-17 18:56:38 Ray

如果您不想在中继器中嵌套的div上使用类，则可以使用部分ID匹配。即使中继器会将信息添加到每个div的ID开头（以确保它是唯一的），该ID仍然会以“效果”或任何您使用的名称结尾。

你可以使用这个你的优势。在jQuery代码，在那里你在“效果” ID操作，你的代码从：

$("#effect")

这样：

$("[id$='effect']")

这将选择其ID END中的所有元素“效果“，所以当repeater将每个div的ID重命名为”repItems_ ctl001_ effect“或者你有什么时，jQuery仍然会找到它。

另请注意，在问题中列出的jQuery代码末尾，您试图根据类“效果”而不是ID访问div。仅供参考。

来源

2009-10-17 20:44:00 WesleyJohnson

带动态内容的JQuery

回答

相关问题