1
나는 클릭 이벤트에서 트리거 된 Prototype을 사용하여 레이아웃에 대한 검색 결과의 기본 집합으로 검색 상자를 배치하는 프로젝트에서 작업하고 있습니다.요소가 업데이트 된 후 이벤트 관찰을 유지하는 방법
출력이 설정되면 해당 새 페이지에는 자체 JavaScript가 사용되어 동적으로 결과를 필터링합니다.
이제 새로운 세트의 결과가 이전에 설정된 자바 스크립트에서 작동하지 않습니다.
매번 새로운 이벤트를 호출하여 지속적인 이벤트를 유지 관리하려면 어떻게해야합니까? 그게 내가해야 할 일입니다. 당신은에
<div id="search_overlay">
<div id="form_box">
<a href="javascript:void(null);"><img src="/images/closebox2.png" class="closebox" /></a>
<form method="post" id="search_form" class="pageopt_left">
<input type="text" name="search_box" id="search_box" value="search" />
</form>
</div>
<div id="table_overlay">
<table class="sortable" id="nf_table" cellpadding="0" border="0" cellspacing="0">
<tr>
<th id="name_th">Name</th><th id="amount_th">Amount</th><th id="tax_letter_th">Tax Letter</th><th id="date_th">Date</th><th id="add_th">Add</th></tr>
<tr>
<td>Abramowitz Foundation (The Kenneth & Nira)</td><td><input type="text" name="amount" value="" id="amount_111" /></td><td><input type="checkbox" name="tax_letter" value="1" id="tax_letter_111" /></td><td><input type="text" name="date" value="" id="date_111" /></td><td><a href="http://compass.krd.webhop.net/sponsors/add/111" class="add_button"><img src="/images/icons/add.png" title="add contact" /></a></td></tr>
... more rows
</table>
</div>
</div>
<script language="javascript">
var c = new Compass_Search('contacts', 'table_overlay');
c.set_url('/sponsors/sponsor_search');
$$('.add_button').each(function(s, index) {
$(s).observe('click', function(e) {
$(e).stop();
var params = $(s).href.split("/");
var userid = params[5];
var amount = 'amount_'+params[5];
var date = 'date_'+params[5];
var tax = 'tax_letter_'+params[5];
if(!Form.Element.present(amount) || !Form.Element.present(date)) {
alert('your amount or date field is empty ');
} else {
var add_params = {'amount':$F(amount), 'date':$F(date), 'tax':$F(tax), 'id':userid};
if(isNaN (add_params.amount)) {
alert('amount needs to be a number');
return false;
} else {
new Ajax.Request('/sponsors/add', {
method: 'post',
parameters: add_params,
onComplete: function(e) {
var post = e.responseText;
var line = 'amount_'+add_params.id;
$(line).up(1).remove();
}
})
}
}
});
});
this.close = $$('.closebox').each(function(s, index) {
$(s).observe('click', o.unloader.bindAsEventListener(this));
})
</script>
알 수 있습니다 : 여기
은 'loaded_page.php'자바 스크립트를 통해 삽입되는 포함 페이지에서 다음<script language="javascript">
var o = new Compass_Modal('add_button', 'history');
var placetabs = new Tabs('tabs', {
className: 'tab',
tabStyle: 'tab'
});
$$('.add_button').each(function(s, index){
$(s).observe('click', function(f) {
loadData();
});
});
function loadData() {
new Ajax.Request('/sponsors/search', {
onComplete: function(r) {
$('overlay').insert({
top:'<div id="search_table">'+r.responseText+'</div>'
});
}
})
}
</script>
에로드되는 코드의 비트가 삽입 된 부분, 새로운 Javascript 또한 새로운 관찰자로 자신의 컨텐츠를 업데이트했습니다. 내용이 업데이트되면 관찰자는 작동하지 않습니다. 당신이 요소 번호 삽입을 전화하는거야으로
은 어쩌면 당신은 (일부 CONSOLE.LOG을 수행하려고 할 수 있습니다) (이러한 방법의 구현에보고 한 것으로)