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-элементов required to be unique across the entire document. Вы используете то же значение id для каждого элемента, который отображает этот ретранслятор, в нарушение этого правила. Теперь, в Интернете, что это такое, ваш браузер не жалуется на это, но попробуйте запустить визуализированный HTML через a validator. 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

Я думаю, что вы должны изменить это в «готовом» функцию, где вы прикрепить событие щелчка - вы используете $ («div.effect») в качестве селектора, который не выглядит действительным для меня , Я предлагаю использовать $ ('. Ui-widget-content'). Это выбирает на основе класса, а не id (который должен быть уникальным, как отмечалось другими).

Answer 5

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

Вы можете использовать это в своих интересах. В коде Jquery, где вы работаете на «эффект» ID, изменить код из этого:

$("#effect") 

к этому:

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

Это позволит выбрать все элементы, ID END в " эффект ", поэтому, когда повторитель переименовывает идентификатор каждого div в" repItems_ ctl001_ effect "или что у вас есть, jQuery все равно найдет его.

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