jquery點擊腳本頁面更改後不活動

Question

我在列表頁面上有兩個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」。我一定有什麼不對，但是我看不到。

Answer 1

儘量使點擊進入一個函數，再調用完成後的負荷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>