单击事件在一个选项卡上触发，但在其他选项卡上不触发

Question

我有一个为集合中的每个元素生成选项卡的循环。选项卡正确生成并且选项卡上的内容正确生成。每个选项卡都有一个 DropDownList 控件，其中包含项目列表。除了一件事，一切似乎都正常工作。第一个选项卡上控件的 javascript 单击事件会触发，但所有其他选项卡的单击事件不会触发？

我认为每个选项卡都有自己的事件处理程序，因此代码是循环的一部分。但是，每个选项卡上控件的“名称/ID”都是相同的，我想知道这是否是我的问题。

每个选项卡具有相同的“命名”控件是否存在某种困难/问题？我认为......也许是错误的......每个选项卡都有自己的上下文，因此不会有任何问题。

循环代码：

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>

和javascript：

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

这导致每个 ddl 都有一个唯一的类名和一个唯一的事件处理程序，但第一个选项卡仍然只能工作？？？

---

编辑 2

我稍微修改了建议的答案：

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

和这个的javascrip：

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

结果是，当我单击 ddl 时，我确实收到了弹出警报……这是有道理的，因为它位于 div 中，上面有一个处理程序，但警报是空的。我也收到了两个警报，所以即使我只点击了 ddl 中的一项，它也触发了两次点击事件？

---

编辑3

我没有包装作为局部视图循环的外部 div，而是将 div 更改为仅包装 ddl 创建并添加一个 id，如下所示：

<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...获取所选项目并从那里正常进行。

---

最终编辑--已解决

所以我通过使用包裹在 ddl 周围的 div 让它工作，但在我看来，这确实是一个创可贴/解决方法......也许不是......我只是不知道说什么。对于其他人来说，这就是我最终要做的。

在 razor cshtml 中，我将 ddl 包装在一个 div 中，如上面编辑 3 中所述，并确保它具有唯一的 id（由我的模型 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() } )

在脚本部分：

$(函数() { $("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);   
            }
        }

    });
});

我欢迎对这篇文章的任何改进/建议/解释。

Answer 1

这样做，在标签中添加一个类：

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

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

并像这样在javascript中做：

<script type="text/javascript">
   $(function() {
       $("div.tab)").click(function () {

        var id = this.id;


        // do whatever here you want to do

       });

  });

    </script>