Нажмите, чтобы событие срабатывало на одной вкладке, но не на других вкладках.

У меня есть цикл, который генерирует вкладки для каждого элемента в коллекции. Вкладки генерируются правильно, и содержимое на вкладках генерируется правильно. На каждой вкладке есть элемент управления DropDownList со списком элементов. Вроде бы все работает нормально, кроме одного. Событие щелчка javascript для элемента управления на первой вкладке срабатывает, но на всех других вкладках событие щелчка НЕ ​​срабатывает ??

Я думал, что каждая вкладка будет иметь свой собственный обработчик событий, так что код является частью цикла. Однако «имя/идентификатор» элемента управления одинаково на каждой вкладке, и мне интересно, моя ли это проблема.

Есть ли какая-то трудность/проблема с тем, что каждая вкладка имеет один и тот же «именованный» элемент управления? Я думал... возможно, неправильно... что каждая вкладка будет иметь свой собственный контекст, поэтому проблем не будет.

Код для цикла:

foreach (var extbrd in Model.ExtBds)
{
    tabstrip.Add()
    .Text(extbrd.ExtName)

    .ImageUrl("~/.../TabIcon.png")
    .Content(@<text>
                <div>
                @Html.Action("Controller", "Action", new { object })
                </div>
               </text>);
 }    

Как вы можете видеть в цикле, код табуляции является частичным представлением. Я вырезал много лишнего кода, но могу опубликовать / отредактировать его, если это необходимо. Этот код:

....snip
<script type="text/javascript">
   $(function() {
       $("#@Html.FieldIdFor(model => model.ExtFIds)").click(function () 
        {...this code works fine so dropped it....});
   });

</script>
....more snipping....
<tr>
   <td style="width:400px;">           
      @Html.DropDownListFor(model => model.ExtFIds, Model.SelectThreads, new {style = "width:400px;height:400px", @size = 30})
   </td>

Итак, вы видите, что код использует одно и то же имя для элемента управления и, следовательно, для обработчика событий javascript .click.

Также я думаю, что было бы полезно знать, что я использую объект управления вкладкой Telerik mvc.

Используя отладчик F12, я не вижу ошибок в консоли или подобных .... мне кажется, что событие щелчка просто не срабатывает на вкладке 2 и далее ...?

Любые идеи очень приветствуются.

Спасибо

Изменить 1 за предложение, которое я сделал, чтобы добавить класс:

<td>           
   @Html.DropDownListFor(model => model.ExtFIds, Model.SelectThreads, new {style = "width:400px;height:400px", @size = 30, @Class = "ddlTab_" + Model.ExtFIds.ToString() } )
</td>

и джаваскрипт:

$(".ddlTab_@(Model.ExtFIds)").click(function ()

Это привело к тому, что каждый ddl имел уникальное имя класса и уникальный обработчик событий, но первая вкладка все еще работала???

Редактировать 2

Я немного изменил предложенный ответ на это:

<div class="Tab">
   @Html.Action("Controller", "Action", new { object })
</div>

и javascript к этому:

 $("div.Tab").click(function () 
    {
        alert(this.id);

В результате я получил всплывающее предупреждение, когда щелкнул ddl... что имеет смысл, потому что он находится в div, на котором есть обработчик, но предупреждения были пустыми. Я также получил два предупреждения, поэтому он дважды запускал событие click, хотя я щелкнул только один элемент в ddl?

Редактировать3

Вместо того, чтобы обертывать внешний div, который является циклом частичного представления, я изменил div, чтобы обернуть ТОЛЬКО создание ddl, и добавил такой идентификатор:

<div class="Tab" id="ddlTab_@(Model.ExtFIds.ToString())">          
            @Html.DropDownListFor(model => model.ExtFIds, Model.SelectThreads, new {style = "width:400px;height:400px", @size = 30} )
</div>

Мое предупреждение теперь дает имя нажатого div. Все еще срабатывает дважды, но я могу жить с этим на данный момент.

Итак, теперь, когда он срабатывает, я полагаю, что мне нужно перейти к дочернему объекту div, который будет ddl... получить выбранный элемент и продолжить оттуда как обычно.

Окончательное редактирование - решено

Итак, я заставил его работать, используя div, обернутый вокруг ddl, но мне кажется, что это лейкопластырь / обходной путь ... возможно, нет ... Я просто не знаю достаточно, чтобы сказать. Для всех остальных вот что я в итоге сделал.

В razor cshtml я завернул ddl в div, как указано выше в редактировании 3, и убедился, что он имеет уникальный идентификатор (уникальность, обеспечиваемая моей моделью ExtFIds).

<div class="Tab" id="ddlTab_@(Model.ExtFIds.ToString())">          
    @Html.DropDownListFor(model => model.ExtFIds, Model.ST, new {style = "...", @size = 30, @Class = "ddlTab_" + Model.ExtFIds.ToString() } )

In the script portion:

$(function() { $("div.Tab").click(function () // поэтому я присоединяю обработчик событий к div вместо ddl { var id = this.id var idLen = id.length;

        id = id.substr(7, idLen);
        //get the div id and then trim off the leading string

        //get our raw html string and load it into an object
        var rawModel = $('#HiddenModel_' + id).html();
        //here I access a control on the tab using the id obtained above...
        //of course in the cshtm I concat the model id to the name as seen for the div


        var jsonModel = jQuery.parseJSON(rawModel) //turn the data into json object

        var selectedItem = $('.ddlTab_' + id).val();
         //here I have to drill down to the correct ddl to find the selected item
         //again the model id provides unique name

        var matchingObj = getObjects(jsonModel, 'ThreadValue', selectedItem);
        //search through my json object to find matching item.

        if(matchingObj.length > 0)
        {
            //update two controls with matched value
            //at this point I think you get the idea...the model id makes for 
            //unique names that can be drilled down to from the wrapping div
            var $FrmDiv = $('#ForumFrame_' + id);
            if ($FrmDiv.length)
            {
                $FrmDiv.empty();
                $FrmDiv.append(matchingObj[0].Link);
            }


            var $prevfram = $('#ForumPreview_' + id);
            if ( $prevfram.length ) {
                $prevfram.val(matchingObj[0].Description);   
            }
        }

    });
});

Я приветствую любые улучшения/предложения/объяснения по этому посту.