2017-11-08 9 views
0

何らかの理由により、セクションが<template>...</template>タグで囲まれたmainpage.htmlというページがあります。 は通常、セクションは、ページのロードにレンダリングされていませんが、 のことができるようにするためにjqueryのを取得するそこの方法は、ロードページmainpage.htmlの<template>タグ内のdivをacccessし、次のスクリプトを実行している:html5内でdivを使用するJqueryを取得する<template>タグ

<script type="text/javascript"> 
    $(document).ready(function() { 
    $("#inner-div").click(function(e) { 
     alert('The div was clicked'); 
     }) 
    }); 
    </script> 

と仮定mainpage.htmlです:スクリプトの実行時divがレンダリングされていない場合

<html> 
<head> 

<script src="/path/to/jquery"></script> 

<script type="text/javascript"> 
    $(document).ready(function() { 
    $("#inner-div").click(function(e) { 
     alert('The div was clicked'); 
     }) 
    }); 
    </script> 


</head> 


<body> 

<template id="temp1"> 


<div id="inner-div"> </div> 


</template> 


<template id="temp2"> 


</template> 


<template id="temp3"> 


</template> 


</body> 

</html> 

答えて

1

これはthis questionの複製です。

要素が動的に作成されるため、アクセス方法を変更する必要があります。 #inner-divを直接ターゲティングする代わりに、bodyまたは親コンテナをターゲティングする必要があります。

1

jQueryのclick機能は、イベントハンドラをアタッチしません。

代わりに、jQueryのon関数を使用できます。

$(document).ready(function() { 
    $("#temp1").on("click","#inner-div",function(e) { 
    alert('The div was clicked'); 
    }) 
}); 

ここで、#inner-div要素は、このスクリプトの実行時に必ずしも存在する必要はありません。

関連する問題