1

JavaScript 関数呼び出しを介していくつかのコンテンツが追加された Web ページがあります。ページの一部のアイテムにはヒントボックスが割り当てられています。ページ読み込みのヒントボックスが表示されてから存在するものについて。動的に追加されたコンテンツの場合、それらは表示されません。http://code.google.com/p/jquery-tipbox/downloads/list ヒントボックス ツールを使用して います

この問題は、例がないとわかりにくいようです。だから、コード

<html>
<head>

<link rel="stylesheet" href="css/style.css" type="text/css">
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/jquery.tipbox.js" type="text/javascript"></script>

<script src="js/my_js_functions.js" type="text/javascript"></script>

<script  type="text/javascript">

$().ready(function(){  

    $("#ele1_id").tipbox("tipbox message 1", 0);
    $("#ele2_id").tipbox("tipbox message 2", 0);
    $("#inc1").tipbox("tipbox message 3", 0);
    $("#inc2").tipbox("tipbox message 4", 0);
});

</script>

</head>
<body>
<center>

<div style="visibility:visible"  >
<input id='ele1_id' type='radio' name='test' value='test1'
onClick=get_fields(id,checked)
> test 1 option <br>

<input id='ele2_id' type='radio' name='test' value='test2'
onClick=get_fields(id,checked)
>test 2 option <br>

</div>
</div></td><td alighn=center>
<div style='visibility:hidden' id='parameters'></div>
<div style='visibility:hidden' id='parameters_extra'></div>

</center>

</body>
</html>

my_js_functions.js :

function add_fields(name,value){

     var target=document.getElementById('parameters_extra');
     var content2="";
   if (name == 'ele1_id') {
   if (value == 'sele1') {
    content2="<table><tr><td id='inc1'>\
<b> text to which I want to have tipbox assigned (tipbox message 3) </b></td>\
<td><input type='text' maxlength=5 name='inp_value1' ></td></tr></table>";
   }
   else if (value == 'sele2') {
    content2="<table><tr><td id='inc2'>\
<b> another text for which 'tipbox message 4' has to appear </b></td>\
<td><input type='text' maxlength=5 name='inp_value2' ></td></tr></table>";
   }
  }
     target.innerHTML = content2;
     target.style.visibility = "visible";


return false;

}

function get_fields(el,checked){

     var target=document.getElementById('parameters');
     var content;

     var target2=document.getElementById('parameters_extra');
     target2.style.visibility = "hidden";

   if (checked){
   if (el == 'ele1_id') {
        content="<table><tr><td><b>select one of the options:</b></td><td>\
<select onChange=add_fields('ele1_id',this.options[this.selectedIndex].value) na
me='ele1_id'>\
<option selected='selected' value='None'>None</option>\
<option value='sele1'>Selection 1</option>\
<option value='sele2'>Selection 2</option>\
</select></td></tr></table>";
    }
   else if (el == 'ele2_id') {

        content="<table><tr><td><b>select one of the options:</b></td><td> \
  <select onChange=add_fields('ele2_id',this.options[this.selectedIndex].value) 
name='ele2_id'> \
<option selected='selected' value='None'>None</option>\
<option value='sele1'>Selection A</option>\
<option value='sele2'>Selection B</option>\
 </select></td></tr></table>";

    }
     target.innerHTML = content; 
     target.style.visibility = "visible"; 
    }
return false;
}
4

1 に答える 1

0

jQuery の getScript 関数を使用して動的ロード後にスクリプトをロードするか、jquery 内で delegate()/on()/live() を使用して動的にロードされた要素にイベントをバインドする必要があります。

http://api.jquery.com/delegate/ ( 廃止予定) http://api.jquery.com/live/ (廃止予定) http://api.jquery.com/on/ http://api.jquery. com/jQuery.getScript/

問題は、jquery または javascript 自体でさえ、存在しないコンテンツにイベントをアタッチできないことにあります。したがって、jquery がイベントを要素タイプにアタッチした後に要素がロードされた場合、そのイベントは新しいものにアタッチされません。エレメント。したがって、これを修正するために、Jquery は (delegate/live/on を介して) 要素の親要素を取得し、その場でイベントをアタッチします。これは、誰かがテーブルのすべての行または類似の行にイベントをアタッチする場合に、1000 のイベント バインディングで JavaScript を行き詰まらせる代わりに、イベントをオンデマンドでアタッチできるという点で非常に優れています。

別の方法として、この動的コンテンツが 1 回程度しかロードされない場合は、より煩雑で正確性が低く、確実に効率が低下しますが、getScript() を使用して、スクリプトをコンテンツとともにオンザフライでロードすることもできます。:)

これが役立つかどうか教えてください。:)

于 2012-04-26T23:28:10.633 に答える