jquery点击脚本页面更改后不活动
问题描述:
我在列表页面上有两个jQuery脚本。第一个使列表行可点击。它工作正常。jquery点击脚本页面更改后不活动
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".clickableRow").click(function(e) {
console.log('clickable row clicked');
window.document.location = $(this).attr("href");
});
});
</script>
第二个是过滤行的搜索功能,它也可以正常工作。
<script type="text/javascript">
jQuery(document).ready(function() {
$("#search-filter").click(function (evt) {
evt.preventDefault();
console.log('evt triggered');
q=$('#q').val();
q_fields=$('#q-fields').attr('value');
$.ajax({
type: 'GET',
url: $(this).attr("href"),
datatype: 'html',
data: {'q': q,
'q_fields': q_fields,
'title': $('#title').text()},
success: function(code_html, status) {
$('#object-list').children().remove();
$(code_html).appendTo('#object-list');
},
error: function(result, status, error) {
alert(result);
}
});
});
});
</script>
它是通过这种形式的激活:
<form method="get" action="">
<input id="q" type="text" name="q">
<input id="q-fields" type="hidden" value="name, prenom" name="q_fields">
<button id="search-filter" class="btn" type="submit" href="/contacts/ajax_update_contact_list">search</button>
</form>
这lattest脚本是一个搜索功能,过滤行,它工作正常。问题是,当我的行被过滤时,第一个脚本不再工作。
<tr class="clickableRow" href="/contacts/532/">
<td></td>
...
</tr>
<tr class="clickableRow" href="/contacts/533/">
<td></td>
...
</tr>
我甚至没有收到控制台信号“clickableRow clicked”。我一定有什么不对,但是我看不到。
答
尽量使点击进入一个函数,再调用完成后的负荷AJAX
<script type="text/javascript">
jQuery(document).ready(function($) {
clickController();
});
function clickController()
{
$(".clickableRow").click(function(e) {
console.log('clickable row clicked');
window.document.location = $(this).attr("href");
});
$("#search-filter").click(function (evt) {
evt.preventDefault();
console.log('evt triggered');
q=$('#q').val();
q_fields=$('#q-fields').attr('value');
$.ajax({
type: 'GET',
url: $(this).attr("href"),
datatype: 'html',
data: {'q': q,
'q_fields': q_fields,
'title': $('#title').text()},
success: function(code_html, status) {
$('#object-list').children().remove();
$(code_html).appendTo('#object-list');
clickController(); // re-call function in here
},
error: function(result, status, error) {
alert(result);
}
});
});
}
</script>
谢谢!有用 ! – 2014-12-13 16:17:44