jQuery с динамическим контентом

Question

Если бы у меня был тег div внутри повторителя, и я хотел добавить эффект jquery к каждому из этих тегов div, как бы это было сделано?

   <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.Что я делаю не так??

Answer 1

попробуйте использовать класс для таких подразделений, как:

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

а в jquery используйте селектор ("div.effect").

я "думаю", что использование одного и того же идентификатора для нескольких вещей может вызвать проблему...

Answer 2

В id значения в HTML- элементах следующие требуется, чтобы он был уникальным для всего документа.Вы используете то же самое id значение для каждого элемента, отображаемого этим повторителем, в нарушение этого правила.Теперь, когда Веб такой, какой он есть, ваш браузер на это не жалуется, но попробуйте запустить отрисованный HTML через валидатор.jQuery воздействует только на первый такой элемент, потому что он ожидает, что там будет быть только один.

Если вы переключитесь с id Для class, у вас должны быть гораздо лучшие результаты.

Answer 3

еще одна идея, которую следует рассмотреть, - поместить тег 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>

Answer 4

Я думаю, что то, что вам нужно изменить, находится в функции 'ready', куда вы прикрепляете событие click - вы используете $ ('div.effect') в качестве селектора, который мне не кажется допустимым.Я предлагаю использовать $('.ui-widget-content').При этом выбирается на основе класса, а не идентификатора (который должен быть уникальным, как отмечают другие).

Answer 5

Если вы не хотите использовать класс для этих divs, вложенных в ваш ретранслятор, вы можете использовать частичное сопоставление идентификаторов.Несмотря на то, что повторитель добавит информацию в начало вашего идентификатора для каждого div (чтобы убедиться, что он уникален), идентификатор все равно будет заканчиваться на "effect" или любое другое имя, которое вы использовали.

Вы можете использовать это в своих интересах.В вашем коде jQuery, где вы работаете с идентификатором "effect", измените свой код с этого:

$("#effect")

к этому:

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

Это позволит выбрать все элементы, идентификатор которых ЗАКАНЧИВАЕТСЯ на "effect", поэтому, когда repeater переименует идентификатор каждого div в "repItems_ ctl001_ effect" или что у вас есть, jQuery все равно найдет его.

Также обратите внимание, что ближе к концу вашего кода jQuery, указанного в вашем вопросе, вы пытаетесь получить доступ к div на основе класса "effect" вместо идентификатора.Просто к твоему сведению.