[英]Click event fires on one tab but not other tabs
我有一个循环,可为集合中的每个元素生成选项卡。 选项卡生成正确,并且选项卡上的内容正确生成。 每个选项卡都有一个DropDownList控件,其中包含项列表。 除了一件事情,其他所有东西似乎都正常工作。 触发第一个选项卡上控件的javascript click事件,但所有其他选项卡上的click事件均不触发?
我当时在想每个选项卡都具有自己的事件处理程序,因此代码是循环的一部分。 但是,控件的“名称/ 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中的一项,它也触发了两次click事件?
编辑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使其起作用,但是在我看来,这似乎是一个创可贴/解决方法……也许不是。。我只是不知道该说些什么。 对于其他人,这就是我最终要做的。
如上所述,在剃须刀cshtml中,我将ddl包裹在div中,并确保它具有唯一的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() } )
在脚本部分:
$(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);
}
}
});
});
我欢迎对此帖子的任何改进/建议/解释。
为此,请在标签中添加一个类:
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.