アンダースコアを使用していくつかの要素を作成し、それらを jQuery で div に追加しています。
.on()
ページの下部では、要素のクリックに応答するためにjQuery を使用しています。
$('.pickup').on('click',
function(e) {
alert("hello");
}
);
ユーザー インタラクション (Google マップ) を介して、div にさらに要素を追加し、クリックにも応答するようにする必要があります。何らかの理由で、そうではありません。私はjsfiddleでそれをすべて切り詰めました:
http://jsfiddle.net/thunderrabbit/3GvPX/
alert('hello')
ページが読み込まれると、出力の行をクリックするとjQueryが使用されることに注意してください。
しかし、[追加] ボタンをクリックすると、新しい行はクリックに反応しません。
私のHTML
<div id="unit_2225" class="pickup">
<span>Click me; I was here first</span>
</div>
<script type="text/template" id="unit-template">
<div class="unit-item">
<span class="pickup">
<span>click us (<%= unit_id %>) via underscore</span>
</span>
</div>
</script>
<div id="divID">
</div>
<button>add</button>
私のJavascript
var addUnitToDiv = function(key,val) {
console.log(val);
var template = _.template($('#unit-template').html(),val);
$('#divID').append(template);
}
var unit_ids = [{unit_id:'hello'},
{unit_id:'click'},
{unit_id:'us'},
{unit_id:'too'},
{unit_id:112}];
$.each(unit_ids, addUnitToDiv);
var unit_pids = [{unit_id:'we'},
{unit_id:'wont'},
{unit_id:'respond'},
{unit_id:'to'},
{unit_id:'clicks'},
{unit_id:358}];
createMore = function() {
$.each(unit_pids, addUnitToDiv);
}
$('.pickup').on('click','span',function() {
alert("hello");
});
$('button').click(createMore);
同様の質問を見つけましたが、ここでその回答を適用する方法がわかりませんでした。