jQuery Uiタブで動的にロードされるUserControl内でJavascriptを使用

Question

jQuery Uiタブを使用してAjax呼び出しからロードするUserControl内にJavaScriptコードを挿入する必要があります。

この

は（jQueryを使ってロードされた）私の見る私はDIVにコンテンツをロードするためのAjax関数を呼び出すこれらのコード行で

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#tabs").tabs({ 
     cache: false, 
     }); 
     getContentTab (1); 
    }); 

    function getContentTab(index) { 
     var url='<%= Url.Content("~/Home/getUserControl") %>/' + index; 
     var targetDiv = "#tabs-" + index; 

     $.get(url,null, function(result) { 
      $(targetDiv).html(result); 
     }); 
    } 
</script> 

<div id="tabs"> 
    <ul> 
     <li><a href="#tabs-1" onclick="getContentTab(1);">Nunc tincidunt</a></li> 
     <li><a href="#tabs-2" onclick="getContentTab(2);">Proin dolor</a></li> 
     <li><a href="#tabs-3" onclick="getContentTab(3);">Aenean lacinia</a></li> 
    </ul> 
    <div id="tabs-1"> 
    </div> 
    <div id="tabs-2"> 
    </div> 
    <div id="tabs-3"> 
    </div> 
</div> 

です...私に説明してみましょう。

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %> 
Number... <span id="testSpan"><%=Model.ToString() %></span>!! 
<input type="button" value="Click me!!" onclick="message();" /> 
<script type="text/javascript"> 
function message(item) { 
    alert($("#testSpan").html()); 
} 
</script> 

問題がメッセージ（）関数は常に1（代わりに、正しい番号を返すので返すということです...

public ActionResult getUserControl(int num) 
    { 
     return PartialView("TestUC", num); 
    } 

そして、これはユーザーコントロールです： これは、コントローラからのアクションです）。

私の質問は...私のコードを正しく実行するには、私のUserControlにスクリプトを追加する必要がありますか？

Answer 1

私はここで推測しています。

あなたの問題は、タブがロードされたときに、別のタブを開いてもDOMに残っていることです（つまり、＃1がデフォルトの場合、2番目のタブをクリックしても読み込まれます） 。

メッセージ関数を呼び出すと、idが "testSpan"の要素が複数あり、jQueryセレクタ$（ "＃testSpan"）が最初の要素を返します。

これは単なるテストコードだと思いますが、この特殊なケースでは、javascript関数の引数として<％= Model.ToString（）％>を追加します。

もう一度、jquery-ui tabs（）関数の動作を推測しています。

よろしく

Answer 2

これは解決策かもしれないが、私は別の（もっときれいな私見）方法で解決この

<script type="text/javascript" defer="defer"> 
function message(item) { 
    alert($("#testSpan").html()); 
} 
</script>