[英]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.